当前位置: 首页 > 学习心得 > Web前端 >

CSS3的animation实现漂浮的云

在过去,我们只能用flash或Javascript来实现背景动画。幸运的是,CSS3的流行使得我们完全可以不再依赖其它编程技术,使用CSS3就可以实现这种效果。一段简单的CSS代码就能轻而易举的实现慢悠悠
在过去,我们只能用flash或Javascript来实现背景动画。幸运的是,CSS3的流行使得我们完全可以不再依赖其它编程技术,使用CSS3就可以实现这种效果。一段简单的CSS代码就能轻而易举的实现慢悠悠的浮云为背景的效果。
 
 
CSS代码
 
       这种背景动画是通过移动背景图的位置实现的,这里没有使用CSS3的transition,而是用animation。
 
@keyframes animatedBackground {
  from { background-position: 0 0; }
  to { background-position: 100% 0; }
}
复制代码
 
       上面是动画定义,下面要把它应用到一个具有背景图的页面元素上:
 
#animate-area {
  width: 560px;
  height: 400px;
  background-image: url(bg-clouds.png);
  background-position: 0px 0px;
  background-repeat: repeat-x;
  animation: animatedBackground 40s linear infinite;
}
复制代码
 
      
       不再需要js来操作动画是一件多么让人欣慰的事呀!虽然这些CSS写法上还有加一些浏览器引擎兼容前缀,看起来很讨厌,但至少比以前高效多了,而且易于配置。
 
      背景云图片以40秒一次的速度顺滑优雅的从左漂移到右,而且无缝的和下一次循环对接,这样无限循环漂浮下去。


 
 
(责任编辑:admin)
织梦二维码生成器
顶一下
(1)
100%
踩一下
(0)
0%

谢谢您请我吃鸡腿

------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码:点击我更换图片
最新评论