多重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实现的漂亮Menu菜单效果代码
Sep 10 HTML / CSS
CSS3贝塞尔曲线示例:创建链接悬停动画效果
Nov 19 HTML / CSS
移动web模拟客户端实现多方框输入密码效果【附代码】
Mar 25 HTML / CSS
传统HTML页面实现模块化加载的方法
Oct 15 HTML / CSS
HTML5 b和i标记将被赋予真正的语义
Jul 16 HTML / CSS
Html5新标签解释及用法
Feb 17 HTML / CSS
html5 Canvas画图教程(8)—canvas里画曲线之bezierCurveTo方法
Jan 09 HTML / CSS
html5教程调用绘图api画简单的圆形代码分享
Dec 04 HTML / CSS
HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等
May 08 HTML / CSS
原生CSS实现文字无限轮播的通用方法
Mar 30 HTML / CSS
不要在HTML中滥用div
May 08 HTML / CSS
深入理解CSS 中 transform matrix矩阵变换问题
Aug 30 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多用户计数器代码
2007/03/11 PHP
php 全局变量范围分析
2009/08/07 PHP
ajax取消挂起请求的处理方法
2013/03/18 PHP
解析argc argv在php中的应用
2013/06/24 PHP
php支持中文字符串分割的函数
2015/05/28 PHP
在Mac OS下搭建LNMP开发环境的步骤详解
2017/03/10 PHP
PHP读取CSV大文件导入数据库的实例
2017/07/24 PHP
Laravel框架实现定时Task Scheduling例子
2019/10/22 PHP
PHP实现页面静态化深入讲解
2021/03/04 PHP
javascript中使用css需要注意的地方小结
2010/09/01 Javascript
jquery iframe操作详细解析
2013/11/20 Javascript
PHP配置文件php.ini中打开错误报告的设置方法
2015/01/09 PHP
jquery+CSS3实现淘宝移动网页菜单效果
2015/08/31 Javascript
学习JavaScript设计模式(策略模式)
2015/11/26 Javascript
使用jQuery调用XML实现无刷新即时聊天
2016/08/07 Javascript
如何理解Vue的.sync修饰符的使用
2017/08/17 Javascript
js原生方法被覆盖,从新赋值原生的方法
2018/01/02 Javascript
Angular网络请求的封装方法
2018/05/22 Javascript
JS实现可针对算术表达式求值的计算器功能示例
2018/09/04 Javascript
vue 项目 iOS WKWebView 加载
2019/04/17 Javascript
layui 上传文件_批量导入数据UI的方法
2019/09/23 Javascript
JS实现进度条动态加载特效
2020/03/25 Javascript
ant design vue 表格table 默认勾选几项的操作
2020/10/31 Javascript
jQuery实现可以扩展的日历
2020/12/01 jQuery
Python中datetime模块参考手册
2017/01/13 Python
python使用正则表达式的search()函数实现指定位置搜索功能
2017/11/10 Python
Python import与from import使用及区别介绍
2018/09/06 Python
Python3爬虫学习之将爬取的信息保存到本地的方法详解
2018/12/12 Python
Django如何使用第三方服务发送电子邮件
2019/08/14 Python
Python Sphinx使用实例及问题解决
2020/01/17 Python
python GUI库图形界面开发之PyQt5访问系统剪切板QClipboard类详细使用方法与实例
2020/02/27 Python
python3中布局背景颜色代码分析
2020/12/01 Python
Django搭建项目实战与避坑细节详解
2020/12/06 Python
Html5之自定义属性(data-,dataset)
2019/11/19 HTML / CSS
手机银行营销方案
2014/03/14 职场文书
用javascript制作qq注册动态页面
2021/04/14 Javascript