<!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. 每日一题 LeetCode 491. 递增子序列 【递推】【递增子序列】【动态规划】

    题目链接 https://leetcode-cn.com/problems/increasing-subsequences/ 题目说明 题解 主要方法:递推:动态规划 解释说明: 数据表示:观察数据范 ...

  2. Fedora version history --- kernel version

    Fedora version history https://en.wikipedia.org/wiki/Fedora_version_history     Version (Code name)[ ...

  3. 【Flutter 混合开发】嵌入原生View-Android

    Flutter 混合开发系列 包含如下: 嵌入原生View-Android 嵌入原生View-IOS 与原生通信-MethodChannel 与原生通信-BasicMessageChannel 与原生 ...

  4. 实验二 C2C实践

    实验二  C2C实践 [实验目的] 掌握网上购物的基本流程和C2C平台的运营 [实验条件] ⑴.个人计算机一台 ⑵.计算机通过局域网形式接入互联网. (3).奥派电子商务应用软件 [知识准备] 本实验 ...

  5. 多测师讲解接口测试__mock___高级讲师肖sir

    一.关于Mock测试 1.什么是Mock测试?mock测试,源自于英文单词fake,意为假的测试实际工作中用于模拟那些无法实时连接的后端,或是没有开发出来的后端,用于获得结果反馈的一种测试方式.通过发 ...

  6. pyquery 匹配NavigableString

    pyquery 匹配NavigableString不像xpath那样精确找打匹配对象,只需匹配包含NavigableString的根节点

  7. Jetson AGX Xavier部署ORB_SLAM2（ROS）

    1. 修改CMakeLists.txt Examples/ROS/ORB_SLAM2下的CMakeLists.txt 原 set(LIBS ${OpenCV_LIBS} ${EIGEN3_LIBS} ...

  8. 【树形结构】51nod 1766 树上的最远点对

    题目内容 \(n\)个点被\(n−1\)条边连接成了一颗树,边有权值\(w_i\).有\(q\)个询问,给出\([a,b]\)和\([c,d]\)两个区间,表示点的标号请你求出两个区间内各选一点之间的 ...

  9. ReSharper 注册码

    用户名:ronle 注册码:ZoJzmeVBoAv9Sskw76emgksMMFiLn4NM 原文地址:http://hi.baidu.com/ronle/item/a509b5f7b851971be ...

  10. 第三十二章 Linux常规练习题（一）

    一.练习题一 1.超级用户(管理员用户)提示符是____,普通用户提示符是____.2.linux关机重启的命令有哪些 ?3.bash是什么?4.bash特性, 常见的bash特性有哪些?5.网卡的配 ...