使用纯CSS3实现一个日食动画

web开发作者:dayu日期:10天前点击:3
<div class="eclipse sun"></div> <div class="eclipse moon"></div>

我们把整个日食过程分解为3个阶段:1. 缓慢移入 2. 短暂停留 3. 缓慢移出。

在此期间。会产生3个彼此关联的动画。

首先是月亮的位置移动,我们通过改变月亮的X坐标(left或right属性值)来实现(注意把太阳和月亮均设置成绝对定位)。

其次太阳会逐步呈现出圆晕的光线效果,我们使用框阴影(box-shadow)来实现。

box-shadow: 0px 0px 10px 5px #FFAD00;
最后与此同步的是,整个页面背景要呈现一个变暗的效果,这个比較简单。改变body的background-color就可以。


剩下的事情就是针对以上阶段编写关键帧(keyframes)的CSS规则就可以。

你能够自己试试看(http://wow.techbrood.com/fiddle/6372)。

技术分享技术分享


by iefreer


使用纯CSS3实现一个日食动画

原文地址:http://www.cnblogs.com/mfmdaoyou/p/7225739.html


下一篇       上一篇