|
|
|
html5+css3实现日食动画过程
[mw_shl_code=html,true]<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>[传说中的“天狗食月”] - HTML5+CSS3实现(无图片)</title>
</head>
<body style="padding:0 !important;margin:0 !important;">
<div style="position:relative;overflow:hidden !important;padding:5px 0 !important;font:normal 13px/1.3 simsun,verdana !important;color:#FFFFFF !important;border:0 none !important;border-bottom:1px solid #2D2D2D !important;background:#393939 !important;"> 传说中的“天狗食月” 代码示例 </div>
<style>
body {overflow:hidden;background-color:#101010;}
#wrapper {position:absolute;top:100px;left:50%;width:200px;height:200px;margin-left:-100px;
-webkit-animation-name: moonline;-webkit-animation-duration: 10s;-webkit-animation-timing-function: linear;-webkit-animation-iteration-count: infinite;
-moz-animation-name: moonline;-moz-animation-duration: 10s;-moz-animation-timing-function: linear;-moz-animation-iteration-count: infinite;
}
@-webkit-keyframes moonline {
0% {top:220px;left:30%;opacity:0;}
30% {top:100px;left:50%;opacity:1;}
50% {top:100px;left:50%;opacity:1;}
80% {top:100px;left:50%;opacity:1;}
100% {top:220px;left:80%;opacity:0;}
}
@-moz-keyframes moonline {
0% {top:220px;left:30%;opacity:0;}
30% {top:100px;left:50%;opacity:1;}
50% {top:100px;left:50%;opacity:1;}
80% {top:100px;left:50%;opacity:1;}
100% {top:220px;left:80%;opacity:0;}
}
#circle {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
background-color: #EFEFEF;
-webkit-box-shadow:0 0 40px #FFFFFF;
-moz-box-shadow:0 0 40px #FFFFFF;
box-shadow:0 0 40px #FFFFFF;
border-radius: 100px;
-webkit-animation-name: moonright;-webkit-animation-duration: 10s;-webkit-animation-timing-function: linear;-webkit-animation-iteration-count: infinite;
-moz-animation-name: moonright;-moz-animation-duration: 10s;-moz-animation-timing-function: linear;-moz-animation-iteration-count: infinite;
}
@-webkit-keyframes moonright {
0% {-webkit-box-shadow:0 0 10px #FFFFFF;}
30% {-webkit-box-shadow:0 0 10px #FFFFFF;}
40% {-webkit-box-shadow:0 0 20px #FFFFFF;}
50% {-webkit-box-shadow:0 0 40px #FFFFFF;}
60% {-webkit-box-shadow:0 0 20px #FFFFFF;}
80% {-webkit-box-shadow:0 0 10px #FFFFFF;}
100% {-webkit-box-shadow:0 0 10px #FFFFFF;}
}
@-moz-keyframes moonright {
0% {-moz-box-shadow:0 0 10px #FFFFFF;}
30% {-moz-box-shadow:0 0 10px #FFFFFF;}
40% {-moz-box-shadow:0 0 20px #FFFFFF;}
50% {-moz-box-shadow:0 0 40px #FFFFFF;}
60% {-moz-box-shadow:0 0 20px #FFFFFF;}
80% {-moz-box-shadow:0 0 10px #FFFFFF;}
100% {-moz-box-shadow:0 0 10px #FFFFFF;}
}
#circle1 {
display:block;
content:"";
position: absolute;
top: -1px;
left: -1px;
width: 202px;
height: 202px;
background-color: #101010;
border-radius: 100px;
-webkit-animation-name: moon;-webkit-animation-duration: 10s;-webkit-animation-timing-function: linear;-webkit-animation-iteration-count: infinite;
-moz-animation-name: moon;-moz-animation-duration: 10s;-moz-animation-timing-function: linear;-moz-animation-iteration-count: infinite;
}
@-webkit-keyframes moon {
0% { left:-252px }
30% { left:-252px }
49% { left:0px;}
51% { left:0px;}
53% { left:0px;}
80% { left:252px;}
100% { left:252px;}
}
@-moz-keyframes moon {
0% { left:-252px }
30% { left:-252px }
49% { left:0px;}
51% { left:0px;}
53% { left:0px;}
80% { left:252px;}
100% { left:252px;}
}
</style>
<div id="wrapper">
<div id="circle"></div>
<div id="circle1"></div>
</div>
</body>
</html>[/mw_shl_code] |
|
|Archiver|手机版|小黑屋|应天社区
( 湘ICP备17015224号 )
发表于 2017-5-20 00:37:44