多重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实现Win8风格的方格导航菜单效果
Apr 10 HTML / CSS
CSS3中31种选择器使用方法教程
Dec 05 HTML / CSS
css3的图形3d翻转效果应用示例
Apr 08 HTML / CSS
一款纯css3实现的漂亮的404页面的实例教程
Nov 27 HTML / CSS
使用CSS禁止textarea调整大小功能的方法
Mar 13 HTML / CSS
CSS3实现超酷的黑猫警长首页
Apr 26 HTML / CSS
CSS3 mask 遮罩的具体使用方法
Nov 03 HTML / CSS
详解background属性的8个属性值(面试题)
Nov 02 HTML / CSS
用canvas实现图片滤镜效果附演示
Nov 05 HTML / CSS
html5 canvas移动浏览器上实现图片压缩上传
Mar 11 HTML / CSS
canvas离屏技术与放大镜实现代码示例
Aug 31 HTML / CSS
使用iframe+postMessage实现页面跨域通信的示例代码
Jan 14 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
ThinkPHP利用PHPMailer实现邮件发送实现代码
2013/09/26 PHP
jquery HotKeys轻松搞定键盘事件代码
2008/08/30 Javascript
js,jQuery 排序的实现代码,网页标签排序的实现,标签排序
2011/04/27 Javascript
jquery插件qrcode在线生成二维码
2015/04/26 Javascript
JS组件Bootstrap dropdown组件扩展hover事件
2016/04/17 Javascript
javascript如何创建对象
2016/08/29 Javascript
微信小程序 实战小程序实例
2016/10/08 Javascript
JavaScript实现解析INI文件内容的方法
2016/11/17 Javascript
微信小程序Redux绑定实例详解
2017/06/07 Javascript
Vue侧滑菜单组件——DrawerLayout
2017/12/18 Javascript
JS实现的图片选择顺序切换和循环切换功能示例【测试可用】
2018/12/28 Javascript
three.js实现炫酷的全景3D重力感应
2018/12/30 Javascript
详解Vue webapp项目通过HBulider打包原生APP(vue+webpack+HBulider)
2019/02/02 Javascript
AngularJS实现的鼠标拖动画矩形框示例【可兼容IE8】
2019/05/17 Javascript
vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解
2020/04/28 Javascript
vue实现按钮切换图片
2021/01/20 Vue.js
[02:31]《DAC最前线》之选手酒店现场花絮
2015/01/30 DOTA
[55:44]OG vs NAVI 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
用python做一个搜索引擎(Pylucene)的实例代码
2017/07/05 Python
Python中将变量按行写入txt文本中的方法
2018/04/03 Python
40行Python代码实现天气预报和每日鸡汤推送功能
2020/02/27 Python
python列表删除和多重循环退出原理详解
2020/03/26 Python
Pycharm IDE的安装和使用教程详解
2020/04/30 Python
python 还原梯度下降算法实现一维线性回归
2020/10/22 Python
python里反向传播算法详解
2020/11/22 Python
python实现不同数据库间数据同步功能
2021/02/25 Python
美国演唱会订票网站:Ticketmaster美国
2017/10/05 全球购物
水果花束:Fruit Bouquets
2017/12/20 全球购物
Capitol Lighting的1800lighting.com:住宅和商业照明
2019/04/10 全球购物
幼儿园校车司机的岗位职责
2014/01/30 职场文书
培训主管岗位职责
2014/02/01 职场文书
应届大专毕业生自我鉴定
2014/04/08 职场文书
个人主要事迹材料
2014/08/26 职场文书
投标售后服务承诺书
2015/04/29 职场文书
大学生暑假实习总结
2015/07/13 职场文书
2019数学教师下学期工作总结
2019/06/27 职场文书