layui-js/test/bayuanbao/index.html

56 lines
1.7 KiB
HTML
Raw Normal View History

2016-10-14 08:23:52 +00:00
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>八圆包下线 尝试永无止境</title>
<meta name="keywords" content="">
<meta name="description" content="">
<meta property="qc:admins" content="016766472643166375">
<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
<style>
/* 初始 */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,input,button,textarea,p,blockquote,th,td,form{margin:0; padding:0;}
html{overflow-x:hidden; overflow-y:auto; background-color:#000; }
body{line-height:24px; font:14px '\5FAE\8F6F\96C5\9ED1',Tahoma,Arial,Helvetica,sans-serif; overflow-x:hidden;}
@-webkit-keyframes bye{
0%{
box-shadow:0 0 0px rgba(255,255,255,0);
opacity: 0.3;
}
50%{
box-shadow:0 0 100px rgba(255,255,255, 1);
opacity: 1;
}
100%{
box-shadow:0 0 0px rgba(255,255,255,0);
opacity: 0.3;
}
}
@keyframes bye{
0%{
box-shadow:0 0 0px rgba(255,255,255, 0);
opacity: 0.3;
}
50%{
box-shadow:0 0 100px rgba(255,255,255, 1);
opacity: 1;
}
100%{
box-shadow:0 0 0px 0px rgba(255,255,255, 0);
opacity: 0.3;
}
}
.box{ position: absolute; left: 50%; top: 50%; transform: translate3d(-50%, -50%, 0); -webkit-transform: translate3d(-50%, -50%, 0); width:200px; height:130px; padding:70px 0 0; line-height:26px; text-align:center; border-radius:100%; background-color:#FF8C00; color:#fff;}
.bye{animation:bye 3s infinite ; -webkit-animation:bye 3s infinite ;}
</style>
</head>
<body>
<div class="box bye">
<p>从未闪耀,也就不曾黯然</p>
<p style="">八圆包<br>2013.10.14 - 2015.12.22</p>
</div>
</body>
</html>