<!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. 【题解】NOIP2018 赛道修建

    题目戳我 \(\text{Solution:}\) 根据题目信息简化题意,是让你在树上找出\(m\)条路径使得路径长度最小值最大. 看到题第一感先二分一个答案,问题转化为如何选择一些路径使得它们最小值 ...

  2. 「剑指offer」27道Mybatis面试题含解析

    1.什么是Mybatis? Mybatis是一个半ORM(对象关系映射)框架,它内部封装了JDBC,开发时只需要关注SQL语句本身,不需要花费精力去处理加载驱动.创建连接.创建statement等繁杂 ...

  3. 执行新增和修改操作报错connection is read-only. Queries leading to data modification are not allowed

    出现这个问题的原因是默认事务只有只读权限,因此要添加下面的每一个add*,del*,update*等等. 分别给予访问数据库的权限. 方法名的前缀有该关键字设置了read-only=true,将其改为 ...

  4. HanLP的分词统计

    HanLP的分词效果鄙人研究了HanLP,他的分词效果确实还可以,而且速度也比较快,10的数据是9000毫秒 @SneakyThrows@Overridepublic LinkedHashMap< ...

  5. 【idea】重装系统（格式化C盘后）idea无法导入maven（jdk重装了，版本不同），结果报错！

    [以下部分截图]2019-11-25 09:48:49,045 [ 108964]   WARN -      #org.jetbrains.idea.maven - Cannot open inde ...

  6. java读取中文乱码解决方法

    Java读取文本文件(例如csv文件.txt文件等),遇到中文就变成乱码.读取代码如下: List<String> lines=new ArrayList<String>(); ...

  7. 用算法去扫雷(go语言)

    最初的准备 首先得完成数据的录入,及从扫雷的程序读取界面数据成为我的算法可识别的数据 其次是设计扫雷的算法,及如何才能判断格子是雷或者可以点击鼠标左键和中键. 然后将步骤2的到的结果通过我的程序实现鼠 ...

  8. CentOS下编译搭建LAMP环境

    搭建LAMP环境须知 搭建LAMP环境时,需要安装的所有软件都要按照一定的顺序安装,我们按照Apache->MySQL->PHP的顺序安装.但是在安装PHP之前,应先安装PHP5需要的最新 ...

  9. 第五章 Linux操作系统关机、重启、注销及其查看ip命令

    一.更新系统时间与网络时间同步 1.  安装ntpdate工具 # yum -y install ntp ntpdate 2.  设置系统时间与网络时间同步 # ntpdate cn.pool.ntp ...

  10. leaflet平台添加天地图方法

    leaflet平台添加天地图得方法具体如下操作 var map = L.map('map',  {   crs: L.CRS.EPSG4326,   zoomControl: true,   edit ...