- A+
所属分类:前端
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 | <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> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | #iframe { -webkit-transform: matrix(-1, 0, 0, 1, 0, 0); -moz-transform: matrix(-1, 0, 0, 1, 0, 0); transform: matrix(-1, 0, 0, 1, 0, 0); -o-transform: skew(0deg, 180deg) scale(-1, 1); /* 4个都是都为翻转网页, 为了兼容浏览器所以要加上不同的前缀. */ /* 我这儿不是在写教程..所以就不详细解释transform和matrix具体怎么用了.. 不然就占太多篇幅了 */ filter:progid:DXImageTransform.Microsoft.BasicImage(mirror=1); /* IE的翻转滤镜, 这样在IE下也兼容了, 也能正常工作. */ width: 100%; /* iframe的父元素是body, 这里意思就是占满body这个容器, 有多宽占多宽 */ height: 100%; /* 占满body容器的整个高度 */ position: absolute; /* 让iframe变成绝对定位, 原点是浏览器窗口最左上角那个地方 */ top: 0px; /* 跟顶部的距离是0 */ left: 0; /* 跟左边的距离是0 */ /* 这么干是因为几乎所有浏览器都会给网页左上角加上一点边距, 这样就不会挤着难看. */ border: none; /* 去掉iframe的默认边框 */ } body{ overflow: hidden; /* 要是网页内容太大, 溢出的部分不显示 */ } |

我的微信公众号
我的微信公众号扫一扫