233，笑死我了，记录真假b站的css实现–前端

1
626 views

A+

所属分类：前端

摘要

今天在破站要完的相关群里面看到了群友对于的仿冒b站（其实是引用和特色修改）争论，感觉很有意思，就转过来了，希望各位道友喜欢。

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>      
        <style type="text/css">
        .mirror_ifrom
        {
            animation:mirror forwards 0s ;
            /* Firefox: */            -moz-animation:mirror forwards 0s ;
            /* Safari and Chrome: */            -webkit-animation:mirror forwards 0s ;
            /* Opera: */            -o-animation:mirror forwards 0s ;
        }
        @keyframes mirror
        {
        from {transform:scaleX(1);}
        to {transform:scaleX(-1);}
        }

        @-moz-keyframes mirror /* Firefox */        {
        from { 
            -moz-transform:scaleX(1);
        }
        to {
            -moz-transform:scaleX(-1);
        }
        }

        @-webkit-keyframes mirror /* Safari 和 Chrome */        {
        from {-webkit-transform:scaleX(1)}
        to {-webkit-transform:scaleX(-1)}
        }

        @-o-keyframes mirror /* Opera */        {
        from {-o-transform:scaleX(1);}
        to {-o-transform:scaleX(-1);}
        }
        .boom{
           position:fixed;margin:auto;left:0; right:0; top:0; bottom:0;width:280px; height:150px;
        }
        .boom input{
            width: 200px;
            height: 22px;
            -moz-box-shadow: 2px 1px 5px #000000;
            -webkit-box-shadow: 2px 1px 5px #000000;
            box-shadow: 2px 1px 5px #000000;
            border:solid 1px #8f848f;
            -moz-border-radius-topleft: 5px;
            -moz-border-radius-topright:5px;
            -moz-border-radius-bottomleft:5px;
            -moz-border-radius-bottomright:5px;
            -webkit-border-top-left-radius:5px;
            -webkit-border-top-right-radius:5px;
            -webkit-border-bottom-left-radius:5px;
            -webkit-border-bottom-right-radius:5px;
            border-top-left-radius:5px;
            border-top-right-radius:5px;
            border-bottom-left-radius:5px;
            border-bottom-right-radius:5px;
        }
         .boom button{
            height: 22px;
            margin-left: 10px;
            background-color: white;
            -moz-box-shadow: 2px 1px 5px #000000;
            -webkit-box-shadow: 2px 1px 5px #000000;
            box-shadow: 2px 1px 5px #000000;
            border:solid 1px #8f848f;
            -moz-border-radius-topleft: 5px;
            -moz-border-radius-topright:5px;
            -moz-border-radius-bottomleft:5px;
            -moz-border-radius-bottomright:5px;
            -webkit-border-top-left-radius:5px;
            -webkit-border-top-right-radius:5px;
            -webkit-border-bottom-left-radius:5px;
            -webkit-border-bottom-right-radius:5px;
            border-top-left-radius:5px;
            border-top-right-radius:5px;
            border-bottom-left-radius:5px;
            border-bottom-right-radius:5px;
        }
        </style>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="baidu-site-verification" content="remmrkkuCo" />
        <title>(゜ -゜)つロ弹幕视频网ilidilid -   乾杯~ ilidilid - </title>

        
        <meta name="description" content="ilidilid是一家弹幕站点,大家可以在这里找到许多的欢乐.">
         <meta name="referrer" content="no-referrer" />
        <meta name="keywords" content="I站 哔哩哔哩 B站 弹幕 字幕 AMV MAD MTV ANIME 动漫 动漫音乐 游戏 游戏解说 ACG galgame 动画 番组 新番 初音 洛天依 vocaloid">
        <script type="text/javascript" src="http://static.hdslb.com/js/jquery.min.js"></script>
</head>
<body style="margin:0px">
<iframe id＝"il" src="http://www.ilidilid.com/bilibili" name="iname" frameborder="0" width="100%" height="100%" class="mirror_ifrom"></iframe>

<script type="text/javascript">
function a(){$("iframe").addClass("mirror_ifrom");setTimeout(function(){$("iframe").attr("src","bilibili")},1500)}function boom(){var pwd=$("#pwd").val();$.ajax({url:"/boom",type:"POST",data:{pwd:pwd},}).done(function(data){if(data=="2233"){$(".boom").hide();window.localStorage.show==1;a()}else{$("#pwd").val("")}}).fail(function(){console.log("error")}).always(function(){console.log("complete")})}$("#boom").click(function(event){boom()});if(window.localStorage.show==1){$(".boom").hide();a()};
</script>
</body>
</html>

100

101

102

103

<head>

.mirror_ifrom

{

animation:mirror forwards 0s ;

/* Firefox: */

-moz-animation:mirror forwards 0s ;

/* Safari and Chrome: */

-webkit-animation:mirror forwards 0s ;

/* Opera: */

-o-animation:mirror forwards 0s ;

}

@keyframes mirror

{

from {transform:scaleX(1);}

to {transform:scaleX(-1);}

}

@-moz-keyframes mirror /* Firefox */

{

from {

-moz-transform:scaleX(1);

}

to {

-moz-transform:scaleX(-1);

}

@-webkit-keyframes mirror /* Safari 和 Chrome */

{

from {-webkit-transform:scaleX(1)}

to {-webkit-transform:scaleX(-1)}

}

@-o-keyframes mirror /* Opera */

{

from {-o-transform:scaleX(1);}

to {-o-transform:scaleX(-1);}

}

.boom{

position:fixed;margin:auto;left:0; right:0; top:0; bottom:0;width:280px; height:150px;

}

.boom input{

width: 200px;

height: 22px;

-moz-box-shadow: 2px 1px 5px #000000;

-webkit-box-shadow: 2px 1px 5px #000000;

box-shadow: 2px 1px 5px #000000;

border:solid 1px #8f848f;

-moz-border-radius-topleft: 5px;

-moz-border-radius-topright:5px;

-moz-border-radius-bottomleft:5px;

-moz-border-radius-bottomright:5px;

-webkit-border-top-left-radius:5px;

-webkit-border-top-right-radius:5px;

-webkit-border-bottom-left-radius:5px;

-webkit-border-bottom-right-radius:5px;

border-top-left-radius:5px;

border-top-right-radius:5px;

border-bottom-left-radius:5px;

border-bottom-right-radius:5px;

}

.boom button{

height: 22px;

margin-left: 10px;

background-color: white;