用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.)
相关文章推荐
- 用CSS3的animation轻松实现背景动画:漂浮的云
- CSS3动画animation实现漂浮的云
- CSS3点击按钮实现背景渐变动画效果
- 模仿百度首页“元宵节汤圆”动图,并实现360°不停旋转(CSS3的animation动画效果)
- css3 animation 实现帧动画
- Css3 3d animation Step1---介绍如何实现css动画
- 利用requestAnimationFrame和Tween算法实现兼容所有浏览器的运动动画,直接秒杀Css3动画
- create-keyframe-animation-js实现css3动画
- CSS3 动画实现 animation 和 transition 比较
- Android animation 动画背景图自动播放的实现
- 验证requestAnimationFrame、CSS3以及setinterval实现动画效果的优劣
- CSS3动画animation实现云彩向左滚动
- CSS3 Animation实现加载动画
- CSS3轻松实现彩色旋转六面体动画
- css3 使用animation实现动画效果
- Android animation 动画背景图自动播放的实现
- UV动画轻松实现 - 无限背景循环效果
- CSS3动画实现背景滚动
- css3动画显示实现animation属性
- Android animation 动画背景图自动播放的实现