CSS3的animation轻松实现漂浮的云
在过去,我们只能用flash或Javascript来实现背景动画。幸运的是,CSS3的流行使得我们完全可以不再依赖其它编程技术,使用CSS3就可以实现这种效果。一段简单的CSS代码就能轻而易举的实现慢悠悠的浮云为背景的效果。
CSS代码
这种背景动画是通过移动背景图的位置实现的,这里没有使用CSS3的transition,而是用animation。
上面是动画定义,下面要把它应用到一个具有背景图的页面元素上:
不再需要js来操作动画是一件多么让人欣慰的事呀!虽然这些CSS写法上还有加一些浏览器引擎兼容前缀,看起来很讨厌,但至少比以前高效多了,而且易于配置。
背景云图片以40秒一次的速度顺滑优雅的从左漂移到右,而且无缝的和下一次循环对接,这样无限循环漂浮下去。
观看演示
本文由HTML5中国网为您提供
关键词:CSS、CSS3、html5、Javascript、flash
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秒一次的速度顺滑优雅的从左漂移到右,而且无缝的和下一次循环对接,这样无限循环漂浮下去。
观看演示
本文由HTML5中国网为您提供
关键词:CSS、CSS3、html5、Javascript、flash
【CSS3的animation轻松实现漂浮的云】相关文章
2. jQuery Flat Shadow – 轻松实现漂亮的长阴影效果
3. jQuery Flat Shadow – 轻松实现漂亮的长阴影效果
4. Nunchuck.js - 轻松实现多个设备的数据同步
7. FullPage.js:轻松实现全屏滚动(单页网站)效果
10. Telefónica与Mozilla开拓基于HTML5互联网设备
本文来源:https://www.51html5.com/a3599.html
上一篇:jQuery开发技巧和心得开发员必备
下一篇:创建最好的jQuery的10个经验
﹝CSS3的animation轻松实现漂浮的云﹞相关内容
- 使用 HTML5 WebGL 实现逼真的云朵效果
- 利用CSS3的checked伪类实现OL的隐藏显示
- 瀑布流多列布局排版控制CSS3的实现方法
- CSS3的学习--实现瀑布流
- 10款重量级CSS3的全新特效 实现绚丽前端动画效果
- jQuery Wheel Menu:实现漂亮的 Path 风格旋转菜单
- jQuery Wheel Menu:实现漂亮的 Path 风格旋转菜单
- MUGEDA-基于HTML5技术的云动画平台
- CSS3的文字阴影—Text-Shadow
- CSS3的10个精彩案例