多重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学习心得分享
Aug 19 HTML / CSS
css3 transform属性详解
Sep 30 HTML / CSS
一款纯css3实现的非常实用的鼠标悬停特效演示
Nov 05 HTML / CSS
CSS3中currentColor关键字的妙用
Feb 27 HTML / CSS
纯CSS3制作的鼠标悬停时边框旋转
Jan 03 HTML / CSS
html5版canvas自由拼图实例
Oct 15 HTML / CSS
详解使用HTML5 Canvas创建动态粒子网格动画
Dec 14 HTML / CSS
HTML5 常见面试题之PC端和移动端区别介绍
Jan 22 HTML / CSS
基于canvas的骨骼动画的示例代码
Jun 12 HTML / CSS
HTML5 直播疯狂点赞动画实现代码 附源码
Apr 14 HTML / CSS
HTML+CSS+JavaScript实现图片3D展览的示例代码
Oct 12 HTML / CSS
详解CSS不定宽溢出文本适配滚动
May 24 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
Zerg剧情介绍
2020/03/14 星际争霸
php 文件上传类代码
2011/08/06 PHP
浅谈apache和nginx的rewrite的区别
2013/02/22 PHP
php中jpgraph类库的使用介绍
2013/08/08 PHP
php类中的各种拦截器用法分析
2014/11/03 PHP
在SAE上搭建最新wordpress的方法
2014/12/21 PHP
thinkPHP中验证码的简单实现方法
2016/12/05 PHP
XP折叠菜单&仿QQ2006菜单
2006/12/16 Javascript
defer属性导致引用JQuery的页面报“浏览器无法打开网站xxx,操作被中止”错误的解决方法
2010/04/27 Javascript
jQuery Selector选择器小结
2010/05/06 Javascript
js 设置缓存及获取设置的缓存
2014/05/08 Javascript
jQuery实现简单的日期输入格式化控件
2015/03/12 Javascript
bootstrap布局中input输入框右侧图标点击功能
2016/05/16 Javascript
angular实现表单验证及提交功能
2017/02/01 Javascript
js 实现省市区三级联动菜单效果
2017/02/20 Javascript
jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法
2017/03/03 Javascript
浅析node应用的timing-attack安全漏洞
2018/02/28 Javascript
解决layer.confirm选择完之后消息框不消失的问题
2019/09/16 Javascript
浅谈v-for 和 v-if 并用时筛选条件方法
2019/11/07 Javascript
在vue中使用console.log无效的解决
2020/08/09 Javascript
JavaScript Blob对象原理及用法详解
2020/10/14 Javascript
web.py在模板中输出美元符号的方法
2014/08/26 Python
Python标准库urllib2的一些使用细节总结
2015/03/16 Python
安装Python的web.py框架并从hello world开始编程
2015/04/25 Python
Python实现的简单计算器功能详解
2018/08/25 Python
python匿名函数的使用方法解析
2019/10/10 Python
Python调用scp向服务器上传文件示例
2019/12/22 Python
详解Pymongo常用查询方法总结
2021/01/29 Python
Book Depository欧盟:一家领先的国际图书零售商
2019/05/21 全球购物
J2ee常用的设计模式?说明工厂模式
2015/05/21 面试题
品质主管的岗位职责
2013/12/04 职场文书
自动化毕业生专业自荐书范文
2014/02/04 职场文书
狼和鹿教学反思
2014/02/05 职场文书
计算机应用专业自荐信
2014/07/05 职场文书
php+laravel 扫码二维码签到功能
2021/05/15 PHP
JS前端使用canvas实现物体的点选示例
2022/08/05 Javascript