美文网首页
偶然发现的镜像网站

偶然发现的镜像网站

作者: 查无此人_chazz | 来源:发表于2018-03-01 18:32 被阅读0次

    b站的镜像网站
    扒了下代码,发现只是一个iframe配合css实现的 其中核心css代码如下

    <style>
            .mirror_ifrom
            {
                -webkit-transform:scaleX(-1)
            }
        </style> 
    

    其中 核心代码为 -webkit-transform 属性
    该属性的作用就是缩放
    其中scaleX(x) 是缩放X轴,scaleY(x)是缩放Y轴,sacle(x)是x/y同时缩放
    我们需要的是对称的页面,所以将x轴缩放一倍即可达到效果


    以下是iframe部分代码

      <iframe src="http://www.bilibili.com"  width="100%" style="border-bottom: 0px; padding-bottom: 0px;" height="100%" frameborder="0"  class="mirror_ifrom" sandbox="allow-forms allow-scripts allow-same-origin allow-popups"></iframe>
    

    由于bilibili有非父页面重定向的设置,所以会导致iframe引用后跳转到B站去
    所以将自己的iframe调整为和B站同源的效果 增加 sandbox属性

    sandbox="allow-forms allow-scripts allow-same-origin allow-popups"
    

    以上! 感兴趣的胖友可以试试

    相关文章

      网友评论

          本文标题:偶然发现的镜像网站

          本文链接:https://www.haomeiwen.com/subject/cjrnxftx.html