<!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. 01 . OpenResty简介部署,优缺点,压测,适用场景及用Lua实现服务灰度发布

    简介 OpenResty 是一个基于 Nginx 与 Lua 的高性能 Web 平台,其内部集成了大量精良的 Lua 库.第三方模块以及大多数的依赖项.用于方便地搭建能够处理超高并发.扩展性极高的动态 ...

  2. 带UI 的小初高数学学习系统 —结对编程项目总结

    一. 项目综述 本系统是基于QT Creator 4.3.0开发环境,开发语言C++,能够实现用户注册,发送短信验证码,用户登陆,用户选择题目类型和数量,显示用户本次答题基本功能.支持对用户账号查重, ...

  3. 为Android(和其他移动平台)安装MoSync

    为Android(和其他移动平台)安装MoSync Android教程比赛 这是我提交的文章#2:设置你的Android开发环境.它的主要区别在于它描述了如何安装MoSync,这是一种开发环境,它不是 ...

  4. java进阶(26)--ForEach

    JDK5.0后新特性 一.普通for循环

  5. 【Office-Word妙手回春】Word文本秒转表格

    第一步:Ctrl+A组合键,文本全选 第二步:插入→表格→文本转换成表格 第三步:在"文字分隔位置",勾选相应的符号. 此处的分隔符为 空格. 点击"确定"按钮 ...

  6. C# 中 System.Range 结构体

    翻译自 John Demetriou 2020年4月6日 的文章 <C# 8 Is Introducing Ranges> 我们之前讨论过的 C# 中的一个特性 System.Index ...

  7. dockerfile镜像设置中文

    一.dockerfile镜像设置中文 centos镜像默认不支持中文,把下面的内容加到dockerfile即可 # 修改时区 RUN rm -rf /etc/localtime && ...

  8. ORM查询相关的操作

    必知必会13条 import os os.environ.setdefault("DJANGO_SETTINGS_MODULE", "orm_practice.setti ...

  9. Asp常见函数

    ASP语言的特点: 1.允许使用VBscript或java script简易Script语言,并可在文件中结合Html: 2.无需编译,由WEBserver执行产生: 3.与任何ActiveX Scr ...

  10. 【组合计数】visit

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