您的位置:首页 > Web前端 > CSS

用CSS3的animation轻松实现背景动画:漂浮的云

2014-04-09 11:05 477 查看

背景动画如果用的恰当,会给网页带来意想不到的效果。在过去,我们只能用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.)
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: