<!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. 轻松搭建自己的Linux发行版本

    许多人想要搭建自己的Linux发行版本,可能是觉得有趣,也可能是为了学习更多的Linux知识,或者因为他们有很正式的问题要解决.但是秘密是:自己搭建完美的发行版本不是很困难的一件事.事实上,我们收集了 ...

  2. 【 D3.js 选择集与数据详解 — 2 】 使用data()绑定数据

    D3 中绑定数据大多是由 data() 函数来完成的,它是怎样工作的,它与 datum() 有什么区别呢? data()函数能够将数组各项分别绑定到各元素上,而且能够设置绑定的规则.data()还能够 ...

  3. Microsoft Azure File 服务简介

    我们非常高兴地宣布在微软Azure中国区推出 Microsoft Azure File 服务预览版.Azure File 服务使用标准 SMB 2.1 协议提供文件共享.Azure 中运行的应用程序现 ...

  4. 一个不错的php图片处理类EasyPhpThumbnail Class

    EasyPhpThumbnail Class   EasyPhpThumbnail Class用于处理图片操作和生成缩略图.支持GIF.JPG和PNG三种格式. 提供的功能包括:Resize.剪切.旋 ...

  5. C#中OpenFileDialog的使用

    string resultFile = ""; OpenFileDialog openFileDialog1 = new OpenFileDialog();            ...

  6. CCR源码分析-CCR架构

    CCR,并发与协调运行时(Concurrency and Coordination Runtime).从名字里我们就可以知道,这个东东是用来简化并发程序设计的.为何要并发呢?因为我们有多个任务需要处理 ...

  7. STL总结之vector

    STL中vector是通常作为数组使用,不过它更像一个动态数组,在实际项目开发中大量使用. 优点:存储空间连续,可以使用下标访问,时间复杂度O(1). 缺点:不适合从中间删除和添加元素. C++标准规 ...

  8. NOIP2013 花匠 DP 线段树优化

    网上一堆题解,我写的是N^2优化的那种,nlogn,O(n)的那种能看懂,但是让我自己在赛场写,肯定没戏了 #include <cstdio> #include <iostream& ...

  9. HDU-1240 Asteroids! （BFS）这里是一个三维空间，用一个6*3二维数组储存6个不同方向

    Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Submission ...

  10. bzoj 2242 [SDOI2011]计算器（数论知识）

    Description 你被要求设计一个计算器完成以下三项任务: 1.给定y,z,p,计算Y^Z Mod P 的值: 2.给定y,z,p,计算满足xy≡ Z ( mod P )的最小非负整数: 3.给 ...