<!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. C# 配置文件读取与修改

    C# 配置文件读取与修改   配置文件在很多情况下都使用到, 配置文件分为两种 一种是应用程序的配置文件, 一种是web的配置文件. 两种配置文件最大的区别是web的配置文件更新之后会实时更新, 应用 ...

  2. NOIP2013 货车运输 LCA倍增+最大生成树

    #include <cstdio> #include <iostream> #include <ctime> #include <vector> #in ...

  3. ZOJ3732 Graph Reconstruction Havel-Hakimi定理

    分析: 给定一个非负整数序列{dn},若存在一个无向图使得图中各点的度与此序列一一对应,则称此序列可图化. 进一步,若图为简单图,则称此序列可简单图化 (来自百度百科) 可简单图化的判定可以用Have ...

  4. oracle自动执行一个sql文件的脚本

    如图 文件夹 打开文件夹,如图 autoExeSyn-local.bat文件里的内容如下 @echo off -----------用户/密码-实例-------------执行的sql文件---&g ...

  5. 使用 Visual Studio 分析器找出应用程序瓶颈(转)

    使用 Visual Studio 分析器找出应用程序瓶颈 Hari Pulapaka and Boris Vidolov 本文讨论: 以性能瓶颈为目标 应用程序代码分析 比较分析数据 性能报告 本文使 ...

  6. 五指CMS发布1.4版本，更多的新功能

    五指cms v1.4变更: 新增内容手动分页新增百度地图新增订单管理模块新增订单地址管理增加Microsoft YaHei字体新增推广邀请模块新增私密下载,下载函数 新增百度地图新增筛选功能 修正全局 ...

  7. CosCos2D-android 代码总结

    CosCos2D-android 学习总结 资料: Android游戏开发视频教程 Cocos-android-1代码包下载 直接上代码: MainActivity中Cocos常规写法: //coco ...

  8. 委托demo

    delegate bool Filter(string s); class test { static void Main() { Filter f=new Filter(A); Display(ne ...

  9. Windows Server 2008 R2 配置AD(Active Directory)域控制器 -zhai zi wangluo

    http://files.cnblogs.com/zhongweiv/Windows_Server_2008_R2_%E9%85%8D%E7%BD%AEActive_Directory%E5%9F%9 ...

  10. tensorflow 实现线性方程

    下面的直接是代码: #!usr/bin/env python#coding:utf-8"""这个代码的作用是 通过 tensorflow 来计算 y = 0.3x + 0 ...