<!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. Matlab read_grib.r4 安装新方法（转自：http://blog.sina.com.cn/s/blog_9f36648b010179s7.html）

    最近,打算用Matlab处理些GRIB格式的文件,需要在Matlab中添加read_grib.m文件,其实相当于是添加一个工具箱.read_grib.m的下载见:http://www.renci.or ...

  2. 【转】VC MFC 如何删除文件，目录，文件夹

    原文网址:http://shijuanfeng.blogbus.com/logs/100675115.html 第一种方法:定义一个文件类对象来操作CFile   TempFile;     Temp ...

  3. spring log4j.properties

    log4j.properties log4j.rootLogger=info,appender2,appender3 #appender2\u914D\u7F6E FileAppender log4j ...

  4. JavaScript里的类和继承

    JavaScript与大部分客户端语言有几点明显的不同: JS是 动态解释性语言,没有编译过程,它在程序运行过程中被逐行解释执行JS是 弱类型语言,它的变量没有严格类型限制JS是面向对象语言,但 没有 ...

  5. Hadoop datanode无法启动的错误

    在启动Hadoop分布式部署的过程中,发现datanode没有正常启动,查看了一下日志发现报错: java.io.IOException: Incompatible clusterIDs in /op ...

  6. 【原】Spark Standalone模式

    Spark Standalone模式 安装Spark Standalone集群 手动启动集群 集群创建脚本 提交应用到集群 创建Spark应用 资源调度及分配 监控与日志 与Hadoop共存 配置网络 ...

  7. 归并排序 求逆序数 链表的归并排序 多线程归并排序 java

    import java.util.Scanner; public class Main { private static int count=0; public static void mergeso ...

  8. ssh，telnet远程AIX以及数据传输问题

    (1)telnet远程 输入:telnet 目标IP 输入用户名,密码 进入远程机器 (2)AIX默认安装ftp,使用ftp传输数据 ftp 目标IP地址 输入用户名,密码(远程服务器的) 或者输入f ...

  9. Git 钩子

    1. 概念概述 1.1. 安装钩子 1.2. 脚本语言 1.3. 钩子的作用域 2. 本地钩子 2.1. 预提交钩子 Pre-Commit 2.2. 准备提交信息钩子 Prepare Commit M ...

  10. 集群搭建：主机宽带拨号上网，虚拟机使用桥接模式，该如何ping通外网

    首先介绍一下看这篇文章需要的基础.需要了解虚拟机的 虚拟机的三种网络模式,有Linux基础知识,这些都是前提.首先介绍一下我的环境:主机:win7虚拟机:VMware Workstation 10虚拟 ...