<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>城市场景动画</title>
    <style type="text/css">
        * {
            margin: 0;
        }
        @keyframes sky {
            0% {
                background: #0e0e42
            }
            33% {
                background: #78706d
            }
            50% {
                background: #fad6bf
            }
            66% {
                background: #b6ffde
            }
            100% {
                background: #0e0e42
            }
        }
        @keyframes balloon {
            0% {
                transform: rotate(10deg);
                transition: transform;
            }
            25% {
                transform: translateX(-400px) rotate(30deg);
                transition: transform;
            }
            50% {
                transform: translateX(-720px) rotate(60deg);
                transition: transform;
            }
            75% {
                transform: translateX(-1000px) rotate(40deg);
                transition: transform;
            }
            100% {
                transform: translateX(-1400px);
                transition: transform;
            }
        }
        #father {
            position: relative;
            height: 800px;
            width: 1500px;
            animation: sky 30s linear infinite;
        }
        img{
            position: absolute;
            right: -70px;
            top: 30px;
            animation: balloon 30s linear infinite alternate;
        }
        #father div:nth-of-type(1) {
            background: url(8/beans.png);
            width: 88px;
            height: 201px;
            position: absolute;
            left: 655px;
            bottom: 180px;
        }
        #father div:nth-of-type(2) {
            background: url(8/skyline.png);
            width: 1500px;
            height: 147px;
            position: absolute;
            bottom: 156px;
        }
        #father div:nth-of-type(3) {
            background: url(8/groundBack.png) 65px;
            width: 1500px;
            height: 281px;
            position: absolute;
            bottom: 0;
        }
        #father div:nth-of-type(4) {
            background: url(8/Glockenspiel.png);
            width: 137px;
            height: 263px;
            position: absolute;
            left: 518px;
            bottom: 155px;
        }
        #father div:nth-of-type(5) {
            background: url("8/Planetarium.png");
            width: 347px;
            height: 285px;
            position: absolute;
            left: 832px;
            bottom: 108px;
        }
        #father div:nth-of-type(6) {
            background: url("8/dowEventCenter.png");
            width: 520px;
            height: 229px;
            position: absolute;
            left: 67px;
            bottom: 125px;
        }
        #father div:nth-of-type(7) {
            background: url("8/groundMid.png");
            width: 1500px;
            height: 299px;
            position: absolute;
            bottom: 0;
        }
        #father div:nth-of-type(8) {
            background: url("8/friendshipShell.png");
            position: absolute;
            width: 231px;
            height: 370px;
            left: 262px;
            bottom: 108px;
        }
        #father div:nth-of-type(9) {
            background: url("8/groundFront.png") 255px;
            width: 1500px;
            height: 301px;
            position: absolute;
            bottom: 0;
        }
    </style>
</head>
<body>
<div id="father">
    <img src="8/balloon.png"/>
    <div class="1"></div>
    <div class="2" ></div>
    <div class="3"></div>
    <div class="4"></div>
    <div class="5"></div>
    <div class="6"></div>
    <div class="7"></div>
    <div class="8"></div>
    <div class="9"></div>
</div>
</body>
</html>

HTML5+CSS3城市场景动画的更多相关文章

  1. 9款极具创意的HTML5/CSS3进度条动画（免积分下载）

    尊重原创,原文地址:http://www.cnblogs.com/html5tricks/p/3622918.html 免积分打包下载地址:http://download.csdn.net/detai ...

  2. 9款极具创意的HTML5/CSS3进度条动画

    今天我们要分享9款极具创意的HTML5/CSS3进度条动画,这些进度条也许可以帮你增强用户交互和提高用户体验,喜欢的朋友就收藏了吧. 1.HTML5/CSS3图片加载进度条 可切换多主题 今天要分享的 ...

  3. 分享9款极具创意的HTML5/CSS3进度条动画

    1.HTML5/CSS3图片加载进度条 可切换多主题 今天要分享的这款HTML5/CSS3进度条模拟了真实的图片加载场景,插件会默认去从服务器下载几张比较大的图片,然后让该进度条展现当前读取图片的进度 ...

  4. 9款超绚丽的HTML5/CSS3应用和动画特效

    1.CSS3飘带状3D菜单 菜单带小图标 这次我们要来分享一款很特别的CSS3菜单,菜单的外观是飘带状的,并且每一个菜单项有一个精美的小图标,鼠标滑过菜单项时,菜单项就会向上凸起,像是飘带飘动一样,形 ...

  5. 基于HTML5/CSS3图片网格动画特效

    现在HTML5技术可以让网页上的图片变得非常神奇,各种各样的HTML5图片动画特效让你眼花缭乱.今天要分享的这款HTML5图片网格动画特效就非常炫酷.图片缩略图按网格的布局一行行排列,你只需点击按钮即 ...

  6. HTML5/CSS3鼠标悬停动画菜单按钮

    在线演示 本地下载

  7. 【转】15个无比华丽的HTML5/CSS3动画应用

    原文转自:http://www.html5cn.org/article-7089-1.html 前几天,HTML5标准已经尘埃落定,未来的Web将会是由HTML5主导,当然作为开发者对这一喜讯更为动心 ...

  8. 分享9款用HTML5/CSS3制作的动物人物动画

    1.纯CSS3绘制可爱的蚱蜢 还有眨眼动画 今天我们要分享一个利用纯CSS3绘制的蚱蜢动画,非常可爱. 在线演示 源码下载 2.HTML5 Canvas头发飘逸动画 很酷的HTML5动画 HTML5 ...

  9. 8款给力HTML5/CSS3应用插件 可爱的HTML5笑脸

    1.HTML5/CSS3实现笑脸动画 非常可爱 今天我们要分享一款基于纯CSS3实现的笑脸动画,我们只要在面部滑动鼠标,即可让人物的眼睛嘴巴动起来,实现微笑的效果,还挺可爱的. 在线演示 源码下载 2 ...

随机推荐

  1. STM32F103C8T6-CubeMx串口收发程序详细设计与测试（2）——程序规划、代码编写及测试

    摘要:演示程序的功能:通过中断接收串口数据,在1750us时间内没有收到新的字节的话,将收到的数据原封不动地发送出去,以测试串口的完整收发流程.对使用到的函数进行了说明,阐述了各个函数的调用顺序和调用 ...

  2. 多台centos7服务器实现SSH免密登陆

    一.环境 centos7.x 三台 node1.node2.node3 二.实现免密登陆 2.1.node1上,生成公钥与私钥 [root@node1 ~]# ssh-keygen Generatin ...

  3. vector专题

    <C++程序设计语言(第4部分:标准库)> 31.4 容器 31.4.1 vector 31.4.1.1 vector和增长 重要知识点:vector的内存布局 vector不会在添加每个 ...

  4. 多测师接口测试 --常见的接口面试题目002---高级讲师肖sir

      1.postman接口测试,它有一个功能可以设置参数化,你有用过吗 2.你测试过哪些接口 3.有做过接口测试吗?接口测试你们是怎么测的 4.多接口怎么测(postman里面有一个批量处理) 5.g ...

  5. Springboot+Redis（发布订阅模式）跨多服务器实战

    一:redis中发布订阅功能(http://www.redis.cn/commands.html#pubsub) PSUBSCRIBE pattern [pattern -]:订阅一个或者多个符合pa ...

  6. Presto在滴滴的探索与实践

    ​桔妹导读:Presto在滴滴内部发展三年,已经成为滴滴内部Ad-Hoc和Hive SQL加速的首选引擎.目前服务6K+用户,每天读取2PB ~ 3PB HDFS数据,处理30万亿~35万亿条记录,为 ...

  7. Selenium之自动化常遇问题

    1.等待方式的选择 大家都知道Selenium中等待方式有三种,当在页面没有找到定位的元素抛出异常,那么加个等待,还有问题就换个等待方式 强制等待 time.sleep(10) 显式等待 driver ...

  8. vi/vim系统编辑命令使用技巧

    01前言 在Linux系统中会有很多的文件信息,这些文件的内容如果需要编辑,就必须借助vi或vim编辑命令. vi是Linux命令行界面下的重要文字编辑器.vim是vi命令的增强版. [语法格式] v ...

  9. canal 整合RabbitMQ

    环境如下: canal: 1.15-alpha-1 mysql  5.6.49 rabbitmq 3.7.14 Erlang 21.3 canal 安装和启动 见上篇文章 canal快速安装启动 但是 ...

  10. go 结构体与方法

    go 结构体与方法   go 结构体相当于 python 中类的概念,结构体用来定义复杂的数据结构,存储很多相同的字段属性 结构体的定义 1.结构体的定义以及简单实用 package main imp ...