传说中的“天狗食月”- HTML5+CSS3实现（无图片）
发布时间：2013-05-07 22:57:37
html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<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;}
}