用CSS3的animation轻松实现背景动画：漂浮的云
浏览数：25 /
时间：2015年06月09日
背景动画如果用的恰当，会给网页带来意想不到的效果。在过去，我们只能用flash或Javascript来实现。幸运的是，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;
}背景云图片以40秒一次的速度顺滑优雅的从左漂移到右，而且无缝的和下一次循环对接，这样无限循环漂浮下去。
不再需要js来操作动画是一件多么让人欣慰的事呀！虽然这些CSS写法上还有加一些浏览器引擎兼容前缀，看起来很讨厌，但至少比以前高效多了，而且易于配置。
(英文：davidwalsh.)
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
