css定义多重背景动画
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
*{margin: 0; padding: 0; border: 0;}
@keyframes animatedBird {
from { background-position: 20px 20px, 30px 80px, 0 0; }
to { background-position: 300px -90px, 30px 20px, 100% 0; }
}
@-webkit-keyframes animatedBird {
from { background-position: 20px 20px, 30px 80px, 0 0; }
to { background-position: 300px -90px, 30px 20px, 100% 0; }
}
@-ms-keyframes animatedBird {
from { background-position: 20px 20px, 30px 80px, 0 0; }
to { background-position: 300px -90px, 30px 20px, 100% 0; }
}
@-moz-keyframes animatedBird {
from { background-position: 20px 20px, 30px 80px, 0 0; }
to { background-position: 300px -90px, 30px 20px, 100% 0; }
}
.animate-area{
margin: 100px auto 0;
width: 560px;
height: 190px;
background-image: url('http://static.oschina.net/uploads/space/2015/0814/152322_gbDp_2435847.png'), url('http://static.oschina.net/uploads/space/2015/0814/152322_7IfI_2435847.png'), url('http://static.oschina.net/uploads/space/2015/0814/152322_Xtfs_2435847.png');
background-position: 20px -90px, 30px 80px, 0px 0px;
background-repeat: no-repeat, no-repeat, repeat-x;
animation: animatedBird 4s linear infinite;
-ms-animation: animatedBird 4s linear infinite;
-moz-animation: animatedBird 4s linear infinite;
-webkit-animation: animatedBird 4s linear infinite;
overflow: hidden;
}
</style>
</head>
<body>
<div class="animate-area"></div>
</body>
</html>
css定义多重背景动画的更多相关文章
- 用CSS3的animation轻松实现背景动画:漂浮的云
背景动画如果用的恰当,会给网页带来意想不到的效果.在过去,我们只能用flash或Javascript来实现.幸运的是,CSS3的流行使得我们完全可以使用它来实现这种效果,不再依赖其它编程技术.一段简单 ...
- CSS 第四天 多重背景 变形 过渡
背景原点:background-origin 图片起始位置 border-box包括边框 padding-box边框内 content-box 内容内 **background-repeat 为no- ...
- css(字体,文本,边距,边框,阴影,背景,渐变,多重背景,列表)
font-family 设置字体名称 可以使用多个名称,用逗号分隔,浏览器则按照先后顺序依次使用可用字体 p { font-family:'宋体','黑体','Arial'; } font-size ...
- 用Less CSS定义常用的CSS3效果函数
定义圆角及调用 /* 定义圆角 @radius 圆角大小 */ .round(@radius:5px){ border-radius:@radius; -webkit-border-radius: @ ...
- CSS中的背景用法详解
background 属性是CSS中用于设置元素背景的属性,最简单的background属 性名,是针对背景若干设定的合并简写,最早的CSS只能使用单一背景图片,而在现在却可以设置多个背景图片.而不用 ...
- css吃豆人动画
一. Css吃豆人动画 1. 上半圆:两个div,内部一个圆div,外部设置宽高截取半圆 外部div动画:animation: 动画样式 1s(时长) ease(动画先低速后快速) infinite( ...
- jQuery+CSS3实现404背景动画特效
效果:http://hovertree.com/texiao/jquery/74/ 源码下载:http://hovertree.com/h/bjaf/ko0gcgw5.htm 效果图如下: 代码如下: ...
- 第 17 章 CSS 边框与背景[上]
学习要点: 1.声明边框 2.边框样式 3.圆角边框 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 边框和背景,通过边框和背景的样式设置,给元素增加更丰富的外观. 一.声明边框 边框的声明有 ...
- multiple backgrounds 多重背景
语法缩写如下: background : [background-color] | [background-image] | [background-position][/background-siz ...
随机推荐
- (转载)四种常见的 POST 提交数据方式
(转载)http://www.imququ.com/post/four-ways-to-post-data-in-http.html HTTP/1.1 协议规定的 HTTP 请求方法有 OPTIONS ...
- curl与wget区别
1.curl是libcurl这个库支持的,wget是一个纯粹的命令行命令.2.curl支持更多的协议.curl supports FTP, FTPS, HTTP, HTTPS, SCP, SFTP, ...
- STL总结之queue, priority_queue, stack
之所以把这三个容器放在一起,是因为他们都是容器适配器. STL中queue就是我们常用的FIFO队列,实现是一个容器适配器,这种数据结构在网络中经常使用. queue的模板声明: templa ...
- poj2686 Traveling by Stagecoach
http://poj.org/problem?id=2686 Trav ...
- 【VLFeat】使用matlab版本计算HOG
下载 vlfeat-0.9.18 http://www.vlfeat.org cd D:\program\vlfeat-0.9.18\toolbox
- 测试一个函数的运行时间(C++)
#include <ctime> static clock_t Start,Finish; Start=clock(); fun(); Finish = clock(); double t ...
- Sublime Text 2使用心得
一个比较详细的文章:http://www.cnblogs.com/figure9/p/sublime-text-complete-guide.html 一. 前言 作为一个前端,有一款好的开发利器是必 ...
- ZOJ-3721 Final Exam Arrangement 贪心
题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=3721 容易的贪心题,排个序.. //STATUS:C++_AC_ ...
- SNMP: Simple? Network Management Protocol(转)
转自:http://www.rane.com/note161.html An SNMP Overview The Message Format The Actual Bytes Introductio ...
- javascript function对象
<html> <body> <script type="text/javascript"> Function.prototype.get_my_ ...