多重CSS背景动画实现方法示例


Posted in HTML / CSS onApril 04, 2014

CSS代码

给一个页面元素设置多个背景图片,这种技术很早就可行了,你只需要用逗号把各个背景分隔开:

复制代码
代码如下:
.animate-area {
background-image: url(twitter-logo-bird.png), url(treehouseFrog.png), url(bg-clouds.png);
background-position: 20px -90px, 30px 80px, 0px 0px;
background-repeat: no-repeat, no-repeat, repeat-x;
}

需要注意的是,你希望出现在最上层的背景图应该放在图片队列的第一位。让这些背景图片动起来需要变化background-position,也是用逗号分隔:
复制代码
代码如下:

@keyframes animatedBird {
from { background-position: 20px 20px, 30px 80px, 0 0; }
to { background-position: 300px -90px, 30px 20px, 100% 0; }
}
.animate-area {
animation: animatedBird 4s linear infinite;
}

这样做的结果就是三种背景在同一个元素上移动!

当然,这样实现的并不是最理想的效果,你无法单个的移动某个背景图片的位置,它们必须保持相同的速率和持续时间。

HTML / CSS 相关文章推荐
实例教程 纯CSS3打造非常炫的加载动画效果
Nov 05 HTML / CSS
css3 中的新特性加强记忆详解
Apr 16 HTML / CSS
css3media响应式布局实例
Jul 08 HTML / CSS
HTML5+CSS3网页加载进度条的实现,下载进度条的代码实例
Dec 30 HTML / CSS
css3实现3D文本悬停改变效果的示例代码
Jan 16 HTML / CSS
详解CSS3中的box-sizing(content-box与border-box)
Apr 19 HTML / CSS
CSS3 transition 实现通知消息轮播条
Oct 14 HTML / CSS
HTML高亮关键字的实现代码
Oct 22 HTML / CSS
HTML5 video 视频标签使用介绍
Feb 03 HTML / CSS
详解window.open被浏览器拦截的解决方案
Jul 18 HTML / CSS
关于canvas.toDataURL 在iOS运行失败的问题解决
Sep 16 HTML / CSS
CSS中妙用 drop-shadow 实现线条光影效果
Nov 11 HTML / CSS
CSS图片翻转动画技术详解(IE也实现了)
Apr 03 #HTML / CSS
使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的方法
Apr 03 #HTML / CSS
css3实现input输入框颜色渐变发光效果代码
Apr 02 #HTML / CSS
CSS去掉A标签(链接)虚线框的方法
Apr 01 #HTML / CSS
使用css3背景渐变中的透明度来设置不同颜色的背景渐变
Mar 31 #HTML / CSS
你应该知道的30个css选择器
Mar 19 #HTML / CSS
纯CSS3打造动感漂亮时尚的扇形菜单
Mar 18 #HTML / CSS
You might like
php中var_export与var_dump的区别分析
2010/08/21 PHP
在Yii框架中使用PHP模板引擎Twig的例子
2014/06/13 PHP
PHP高手需要要掌握的知识点
2014/08/21 PHP
php表单提交与$_POST实例分析
2015/01/26 PHP
PHP高精确度运算BC函数库实例详解
2017/08/15 PHP
laravel 5异常错误:FatalErrorException in Handler.php line 38的解决
2017/10/12 PHP
简短几句 通俗解释javascript的闭包
2011/01/17 Javascript
dojo随手记 gird组件引用
2011/02/24 Javascript
使用JavaScript+canvas实现图片裁剪
2015/01/30 Javascript
JS实现点击颜色块切换指定区域背景颜色的方法
2015/02/25 Javascript
JavaScript知识点总结(十一)之js中的Object类详解
2016/05/31 Javascript
关于JavaScript数组你所不知道的3件事
2016/08/24 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的方法
2016/11/29 Javascript
AngularJS使用ng-app自动加载bootstrap框架问题分析
2017/01/04 Javascript
JavaScript实现微信号随机切换代码
2018/03/09 Javascript
浅谈AngularJS中$http服务的简单用法
2018/05/15 Javascript
AngularJS标签页tab选项卡切换功能经典实例详解
2018/05/16 Javascript
jquery实现二级导航下拉菜单效果实例
2019/05/14 jQuery
js实现时分秒倒计时
2019/12/03 Javascript
vue使用svg文件补充-svg放大缩小操作(使用d3.js)
2020/09/22 Javascript
python音频处理用到的操作的示例代码
2017/10/27 Python
python 读写中文json的实例详解
2017/10/29 Python
浅谈python迭代器
2017/11/08 Python
Python pymongo模块用法示例
2018/03/31 Python
基于python代码实现简易滤除数字的方法
2018/07/17 Python
Python数据可视化处理库PyEcharts柱状图,饼图,线性图,词云图常用实例详解
2020/02/10 Python
python实现逢七拍腿小游戏的思路详解
2020/05/26 Python
python+selenium实现12306模拟登录的步骤
2021/01/21 Python
美国肌肉和力量商店:Muscle & Strength
2019/06/22 全球购物
Book Depository美国:全球领先的专业网上书店之一
2019/08/14 全球购物
学生会竞聘书范文
2014/03/31 职场文书
航海技术专业毕业生求职信
2014/04/06 职场文书
和谐家庭演讲稿
2014/05/24 职场文书
十月围城观后感
2015/06/08 职场文书
公司新员工欢迎词
2015/09/30 职场文书
MySQL 自定义变量的概念及特点
2021/05/13 MySQL