<!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. 2015年NEUACM一月月赛题解

    A Money , money 时间限制: 1 Sec  内存限制: 128 MB 提交: 15  解决: 14 题目描述 Small K seen recently stock market rea ...

  2. MySQL锁机制

    一.概况MySQL的锁机制比较简单,其最显著的特点是不同的存储引擎支持不同的锁机制.比如,MyISAM和MEMORY存储引擎采用的是表级锁(table-level locking):BDB存储引擎采用 ...

  3. 提取WORD中的所有InlineShape图片并保存成文件

    InlineShape表示的类型其实不只是图片,还包括OLE, ACTIVE X等. 下面是MSDN中的定义:Represents an object in the text layer of a d ...

  4. aix 系统运行级别

    运行级别 在操作系统上运行维护之前,或者修改系统运行级别之前,需检查各种不同的运行级别.运行级别是一个软件配置,只允许一组选定的进程存在. 识别系统运行级别 本节描述如何识别系统正运行在什么样的运行级 ...

  5. 16道嵌入式C语言面试题

    预处理器(Preprocessor) 1 . 用预处理指令#define 声明一个常数,用以表明1年中有多少秒(忽略闰年问题)         #define SECONDS_PER_YEAR (60 ...

  6. HTTP/2 常见问题回答

    常见问题 为什么修订HTTP? HTTP/1.1已经很好的服务Web超过15个年头,但它的劣势开始显现. 载入一个Web页面比之前占用更多的资源(详情可见HTTP压缩页大小统计),有效的载入这些资源很 ...

  7. 打开链接(C# / 默认浏览器)

    System.Diagnostics.Process.Start("http://www.baidu.com/");

  8. hdoj 2546 饭卡

    饭卡 Time Limit: 5000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submissi ...

  9. IOS学习笔记38--@class #import辨析 #include

    tyle="margin:20px 0px 0px; line-height:26px; font-family:Arial"> #include         区分 #i ...

  10. jqgrid使用简单记录

    我要为id为jqGrid的table使用jqgrid插件. $("#jqGrid").jqGrid({ url: 'data/test.json', mtype: "GE ...