多重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 相关文章推荐
移动端rem布局的两种实现方法
Jan 03 HTML / CSS
CSS3绘制圆角矩形的简单示例
Sep 28 HTML / CSS
详解CSS3 Media Queries中媒体属性的使用
Feb 29 HTML / CSS
结合 CSS3 transition transform 实现简单的跑马灯效果的示例
Feb 07 HTML / CSS
HTML5 声明兼容IE的写法
May 16 HTML / CSS
html5 Canvas画图教程(8)—canvas里画曲线之bezierCurveTo方法
Jan 09 HTML / CSS
HTML 5 input placeholder 属性如何完美兼任ie
May 12 HTML / CSS
HTML5实现获取地理位置信息并定位功能
Apr 25 HTML / CSS
简单介绍HTML5中audio标签的使用
Sep 24 HTML / CSS
HTML5实现直播间评论滚动效果的代码
May 27 HTML / CSS
html5实现点击弹出图片功能
Jul 16 HTML / CSS
纯CSS打字动画的实现示例
Aug 05 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
从零开始学YII2框架(一)通过Composer安装Yii2框架
2014/08/20 PHP
PHP实现对png图像进行缩放的方法(支持透明背景)
2015/07/15 PHP
jquery+thinkphp实现跨域抓取数据的方法
2016/10/15 PHP
PHP执行shell脚本运行程序不产生core文件的方法
2016/12/28 PHP
用jQuery技术实现Tab页界面之二
2009/09/21 Javascript
使用IE6看老赵的博客 jQuery初探
2010/01/17 Javascript
js 异步操作回调函数如何控制执行顺序
2013/12/24 Javascript
jquery实现Li滚动时滚动条自动添加样式的方法
2015/08/10 Javascript
基于JQuery和CSS3实现仿Apple TV海报背景视觉差特效源码分享
2015/09/21 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(一)
2015/12/10 Javascript
JavaScript图像延迟加载库Echo.js
2016/04/05 Javascript
Bootstrap的Carousel配合dropload.js实现移动端滑动切换图片
2017/03/10 Javascript
详解JavaScript数组过滤相同元素的5种方法
2017/05/23 Javascript
vue计算属性及使用详解
2018/04/02 Javascript
对node.js中render和send的用法详解
2018/05/14 Javascript
微信小程序制作扭蛋机代码实例
2019/09/24 Javascript
关于layui 实现点击按钮添加一行(方法渲染创建的table)
2019/09/29 Javascript
koa2 数据api中间件设计模型的实现方法
2020/07/13 Javascript
Vue select 绑定动态变量的实例讲解
2020/10/22 Javascript
原生js实现下拉框选择组件
2021/01/20 Javascript
[01:58]最残酷竞争 2016国际邀请赛中国区预选赛积分循环赛回顾
2016/06/28 DOTA
浅谈python jieba分词模块的基本用法
2017/11/09 Python
Python实现mysql数据库更新表数据接口的功能
2017/11/19 Python
python实现二叉树的遍历
2017/12/11 Python
Python操作Sql Server 2008数据库的方法详解
2018/05/17 Python
详解PyQt5信号与槽的几种高级玩法
2020/03/24 Python
python读取yaml文件后修改写入本地实例
2020/04/27 Python
基于Python制作一副扑克牌过程详解
2020/10/19 Python
巴西手表购物网站:eclock
2019/03/19 全球购物
const char*, char const*, char*const的区别是什么
2014/07/09 面试题
函授毕业自我鉴定
2013/12/19 职场文书
退休感言
2014/01/28 职场文书
2014年学生会生活部工作总结
2014/11/07 职场文书
2014年团支书工作总结
2014/11/14 职场文书
面试感谢信范文
2015/01/22 职场文书
基于Python实现将列表数据生成折线图
2022/03/23 Python