<!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. C#实现——十大排序算法之选择排序

    选择排序法 1.工作原理(算法思路) 给定一个待排序数组,找到数组中最小的那个元素 如果最小元素不是待排序数组的第一个元素,则将其和第一个元素互换 在剩下的元素中,重复1.2过程,直到排序完成. 2. ...

  2. Win10安装MongoDB

    1. 下载安装包:mongodb-win32-x86_64-2012plus-4.2.7-signed.msi 2. 安装,注意选择安装目录 3. 新建配置文件mongo.conf: ​``` #数据 ...

  3. 基于ASP.NET Core 3.x的端点路由(Endpoint Routing)实现控制器(Controller)和操作(Action)分离的接口服务

    本文首发于 码友网 -- <基于ASP.NET Core 3.x的端点路由(Endpoint Routing)实现控制器(Controller)和操作(Action)分离的接口服务> 前言 ...

  4. JavaCV FFmpeg采集摄像头YUV数据

    前阵子使用利用树莓派搭建了一个视频监控平台(传送门),不过使用的是JavaCV封装好的OpenCVFrameGrabber和FFmpegFrameRecorder. 其实在javacpp项目集中有提供 ...

  5. ASP。NET控件—控件如何相互关联

    介绍 这是我关于ASP系列的另一篇小文章.NET控件,它的主要焦点是揭示控件如何相互关联,涉及哪些实体,以及它们在此任务中的主要角色是什么. 动机 理解每次处理页面请求和某人在他的浏览器中获得您的we ...

  6. java 反射之静态and动态代理

    首先说一下我们什么情况下使用代理? (1)设计模式中有一个设计原则是开闭原则,是说对修改关闭对扩展开放,我们在工作中有时会接手很多前人的代码,里面代码逻辑让人摸不着头脑(sometimes the c ...

  7. 多测师讲解自动化测试 _RF分配id_高级讲师肖sir

    1.Assign Id To Element.

  8. 多测师讲解python函数 _zip_高级讲师肖sir

    # zip函数 #zip() 函数用于将可迭代的对象作为参数,将对象中对应的元素打包成一个个元组,然后返回由这些元组组成的对象,这样做的好处是节约了不少的内存.1.使用zip讲两个列表打印出来的结果是 ...

  9. 【线段树分治】Dash Speed

    代码的美妙 #include <bits/stdc++.h> %:pragma GCC optimize(3) using namespace std; const int maxn=7e ...

  10. 【组合计数】visit

    题目大意 从 \((0,0)\) 开始,每次只可走上下左右一个单位长度,可走重复路,求第 \(T\) 步正好走到 \((n,m)\) 的方案数. 答案要求对 \(MOD\) 取模,\(MOD\) 保证 ...