首先非常感谢网友懒人的无私分享，本实例中是为大家介绍的一款纯CSS3+HTML5实现的日食全景，效果还是相当的逼真的，全程无任何图片，只需要纯代码，网友们好好看一下哦，非常值得学习的作品。。。
因为使用了CSS3的原因，大家在演示的时候请使用支持CSS3的主流浏览器，如谷歌，火狐等。。
主要动画代码如下：
@-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;}
}
@-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;}
}
@-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;}
}
效果如下 ：
如果您觉得本作品对您的学习有所帮助：
关键字：
HTML5 动画插件 滑动插件 css3 360度旋转 3D特效 3D效果 网友懒人