html背景图片动画,用CSS3的animation轻松实现背景动画：漂浮的云

背景动画如果用的恰当，会给网页带来意想不到的效果。在过去，我们只能用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写法上还有加一些浏览器引擎兼容前缀，看起来很讨厌，但至少比以前高效多了，而且易于配置。

html背景图片动画,用CSS3的animation轻松实现背景动画：漂浮的云相关推荐

html背景图片动效,css3实现点击切换背景图片，并且背景图片实现动画效果
个人认为这是一个很不错的css3案例哦!又是用DW写的啦没办法放效果图哦,就简单放个静态图好了,唉,我也觉得好无奈哦效果图如下: 代码如下: xmlns="http://www.w3.o ...
php图片背景平铺,css如何设置背景图片的平铺方式？css设置背景图片平铺的方法（图文详解）...
css如何设置背景图片的平铺方式?本文就给大家介绍css是如何设置背景图片平铺的方法,让大家了解在css中设置背景图片水平方法平铺.垂直方向平铺,或者是不平铺的方法.有一定的参考价值,有需要的朋友可以 ...
微信转账2020假图片_2020精致简约背景图片 | 简约唯美的微信朋友圈背景图
▼点击蓝字关注我们,免费领头像壁纸▼微信头像壁纸每天换 2020精致简约背景图片简约唯美的微信朋友圈背景图图文来源网络侵删能接吻就不要说话,能拥抱就不要吵架能行动就不要发呆,能团聚就不要推辞 ...
html添加背景图片并且填满div,css background-size与背景图片填满div(示例代码)
background-size与背景图片填满div 在开发中,常有需要将一张图片作为一个div的背景图片充满div的需求 background-size的取值及解释 background-size共有 ...
html背景图片在底部,CSS兑现固定DIV层背景图片且底部显示
CSS实现固定DIV层背景图片且底部显示 /*CSS缩写形式*/ div { background:url(/images/about_bg.jpg) no-repeat fixed; backgro ...
css动画定义,CSS3中Animation动画的定义和调用
现在经常会看到一些门户网站的专题使用到CSS3的动画,咋也不能落伍,在此这梳理下动画知识吧,便于后面用到.接下来介绍下Animation动画的定义和调用,在介绍Animation之前需要了解下Keyf ...
html网页背景图片菜鸟教程,CSS3 背景
补充:CSS3 多重背景(multiple backgrounds) 多重背景,也就是CSS2里background的属性外加origin.clip和size组成的新background的多次叠加,缩 ...
html 背景自动适应,背景图片自适应大小(css3)
body { background: url(/happytime/img/index.jpg) no-repeat center center fixed; background-size: 100 ...
html 背景图片自动旋转,CSS3 菱形拼图实现只旋转div 背景图片不旋转功能
需求背景使用 vue 做的项目,业务需求有一个拼图效果,默认是深色的背景图,上面分五个区域,每次会亮一个区域,整张图都亮,拼图完成.先来看一下最终的效果图. 应用到的知识点: background- ...

html背景图片动画,用CSS3的animation轻松实现背景动画：漂浮的云

html背景图片动画,用CSS3的animation轻松实现背景动画：漂浮的云相关推荐

最新文章

热门文章