<!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定义多重背景动画的更多相关文章

  1. 用CSS3的animation轻松实现背景动画：漂浮的云

    背景动画如果用的恰当,会给网页带来意想不到的效果.在过去,我们只能用flash或Javascript来实现.幸运的是,CSS3的流行使得我们完全可以使用它来实现这种效果,不再依赖其它编程技术.一段简单 ...

  2. CSS 第四天 多重背景 变形 过渡

    背景原点:background-origin 图片起始位置 border-box包括边框 padding-box边框内 content-box 内容内 **background-repeat 为no- ...

  3. css（字体，文本，边距，边框，阴影，背景，渐变，多重背景，列表）

    font-family 设置字体名称 可以使用多个名称,用逗号分隔,浏览器则按照先后顺序依次使用可用字体 p { font-family:'宋体','黑体','Arial'; } font-size ...

  4. 用Less CSS定义常用的CSS3效果函数

    定义圆角及调用 /* 定义圆角 @radius 圆角大小 */ .round(@radius:5px){ border-radius:@radius; -webkit-border-radius: @ ...

  5. CSS中的背景用法详解

    background 属性是CSS中用于设置元素背景的属性,最简单的background属 性名,是针对背景若干设定的合并简写,最早的CSS只能使用单一背景图片,而在现在却可以设置多个背景图片.而不用 ...

  6. css吃豆人动画

    一. Css吃豆人动画 1. 上半圆:两个div,内部一个圆div,外部设置宽高截取半圆 外部div动画:animation: 动画样式 1s(时长) ease(动画先低速后快速) infinite( ...

  7. jQuery+CSS3实现404背景动画特效

    效果:http://hovertree.com/texiao/jquery/74/ 源码下载:http://hovertree.com/h/bjaf/ko0gcgw5.htm 效果图如下: 代码如下: ...

  8. 第 17 章 CSS 边框与背景[上]

    学习要点: 1.声明边框 2.边框样式 3.圆角边框 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 边框和背景,通过边框和背景的样式设置,给元素增加更丰富的外观. 一．声明边框 边框的声明有 ...

  9. multiple backgrounds 多重背景

    语法缩写如下: background : [background-color] | [background-image] | [background-position][/background-siz ...

随机推荐

  1. Android自定义组合控件

    今天和大家分享下组合控件的使用.很多时候android自定义控件并不能满足需求,如何做呢?很多方法,可以自己绘制一个,可以通过继承基础控件来重写某些环节,当然也可以将控件组合成一个新控件,这也是最方便 ...

  2. 两种应该掌握的排序方法--------2.quick Sort

    介绍 http://zh.wikipedia.org/wiki/%E5%BF%AB%E9%80%9F%E6%8E%92%E5%BA%8F 用些里面的c++ 实现,感觉这个空间复杂度比较小.还挺好 in ...

  3. ruby编程语言-学习笔记1

    安装完 ruby ri irb ruby-devel 1. 先来个简单的,写个helloworld  给新手们 (terminal中,# 代表root权限,$ 代表用户权限, 前面的就不写了.) # ...

  4. 用Oracle的TRIM函数去除字符串首尾指定字符

    去掉首尾空格 SELECT TRIM(' abc '), ltrim(' abc '), rtrim(' abc ') FROM dual; 去掉首尾的其他字符 SELECT /*TRIM(';a;b ...

  5. c# 中Intern的作用

    1. 函数如下 public static string Intern(string str) { if(str == null) { throw new ArgumentNullException( ...

  6. 荷兰国旗，三类数字分离 nyoj

    很有用O(n)内实现三类数字分离,以前大多是分成两类数据,快排中分成两类,还有就是"ab***vvvc" 在O(n)中变成 abvvc****,变成两类划分问题   #includ ...

  7. arm linux kernel启动之start_kernel

    了解完kernel启动以前的汇编之后我们来看看正式的c语言启动代码,也就是我们的start_kernel函数了.start_kernel相当大,里面每一个调用到的函数都足够我们伤脑筋了,我这里只是浅尝 ...

  8. Clean Code – Chapter 4: Comments

    “Don’t comment bad code—rewrite it.”——Brian W.Kernighan and P.J.Plaugher The proper use of comments ...

  9. Dumpbin的使用方法

    推荐:http://blog.csdn.net/blpluto/article/details/5706757

  10. HDOJ-ACM1011(JAVA)

    转载声明:原文转自:http://www.cnblogs.com/xiezie/p/5569721.html 搞懂题意之后,个人感觉,这道题题目的描述相当的费解~ 做这道题目,个人感觉,涉及到树的遍历 ...