使用CSS实现一个flash动画

来源:互联网 发布:如何查mac地址值那个大 编辑:程序博客网 时间:2024/06/16 03:33

如我们要实现的是一个日食现象

日食现象是月亮挡在了地球和太阳之间,也就是月亮遮挡住了太阳。

所以要构造日食,我们需要2个对象:一个代表月亮,一个代表太阳。

[css] view plain copy
 在CODE上查看代码片派生到我的代码片
  1. <div class="eclipse sun"></div>  
  2. <div class="eclipse moon"></div>  

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

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

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

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

[css] view plain copy
 在CODE上查看代码片派生到我的代码片
  1. box-shadow: 0px 0px 10px 5px #FFAD00;  
最后与此同步的是,整个页面背景要呈现一个变暗的效果,这个比较简单,改变body的background-color即可。
剩下的事情就是针对以上阶段编写关键帧(keyframes)的CSS规则即可。
0 0
原创粉丝点击