zoukankan html css js c++ java

火箭起飞

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Rock</title>
    <style type="text/css">
        body {
            background: #21122f;
        }

        .fire {
            width: 486px;
            height: 530px;
            position: absolute;
            left: 34px;
            top: 386px;
            transform: rotate(30deg);
            -webkit-transform: rotate(30deg);
        }

        .rocket {
            width: 100%;
            height: 100%;
            margin-left: 189px;
        }

            .rocket .bg {
                position: relative;
                z-index: 10;
            }

        .hua {
            position: absolute;
            width: 2000px;
            height: 2000px;
            left: 322px;
            top: -2000px;
        }
        .huas img:first-child {
            animation: hua 4s linear infinite;
            -webkit-animation: hua 4s linear infinite;
        }
        .huas img:last-child {
            animation: hua 4s linear infinite 2s;
            -webkit-animation: hua 4s linear infinite 2s;
        }

        .hua img {
            width: 2000px;
            height: 2000px;
            position: absolute;
            left: 0;
            top: 0;
        }
        @keyframes hua {
            0% {
                transform: translate(0,0);
            }

            100% {
                transform: translate(-2000px,3000px);
            }
        }

        @-webkit-keyframes hua {
            0% {
                -webkit-transform: translate(0,0);
            }

            100% {
                -webkit-transform: translate(-2000px,3000px);
            }
        }
    </style>
    <script type="text/javascript" src="http://dn-h6app.qbox.me/data/case/youku/js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            window.setInterval(function () {
                $("#fire-a").css("display", $("#fire-a").css("display") == "none" ? "block" : "none");
                $("#fire-b").css("display", $("#fire-b").css("display") == "none" ? "block" : "none");
            }, 100);

        });
    </script>
</head>
<body>
    <div class="hua huas">
        <img src="http://dn-h6app.qbox.me/data/case/youku/images/hua.png">
        <img src="http://dn-h6app.qbox.me/data/case/youku/images/hua.png">
    </div>
    <div class="rocket">
        <div class="bg"><img src="http://dn-h6app.qbox.me/data/case/youku/images/rocket.png"></div>
        <div class="fire">
            <div class="fires" style="height: 580px; opacity: 1; display: none;"><img src="http://dn-h6app.qbox.me/data/case/youku/images/fire-1.png"></div>
            <div class="fires" style="height: 580px; opacity: 1; display: none;"><img src="http://dn-h6app.qbox.me/data/case/youku/images/fire-2.png"></div>
            <div class="fires" style="height: 580px; opacity: 1; display: none;"><img src="http://dn-h6app.qbox.me/data/case/youku/images/fire-3.png"></div>
            <div class="fires" style="height: 580px; opacity: 1; display: none;"><img src="http://dn-h6app.qbox.me/data/case/youku/images/fire-4.png"></div>
            <div class="fires" style="height: 580px; opacity: 1; display: none;"><img src="http://dn-h6app.qbox.me/data/case/youku/images/fire-5.png"></div>
            <div id="fire-a" class="fires" style="display: none; opacity: 1; height: 580px;"><img src="http://dn-h6app.qbox.me/data/case/youku/images/fire-6.png"></div>
            <div id="fire-b" class="fires" style="display: block; opacity: 1; height: 580px;"><img src="http://dn-h6app.qbox.me/data/case/youku/images/fire-7.png"></div>
        </div>
    </div>
</body>
</html>

查看全文

相关阅读:
uniapp,获取用户地理位置信息授权，如果拒绝的话需要引导用户重新请求授权操作
 sql group by 之别扭
 echart.js 遇到的问题及解决
 sql 时间截取分组获得小时数据常用的方法
 使用JSON JavaScriptSerializer 进行序列化或反序列化时出错。字符串的长度超过了为 maxJsonLength属性
 C#中Math.Round()实现中国式四舍五入
 layui js出现一个form内和外的button 事件怪事
 Sql Server 查询指定范围（一周，一月，本周，本月等）内的数据
 java jdk1.6低版本ssm 源码的的在idea的搭建
 一个 jQuery循环获取点击事件,显示tab 子页

原文地址：https://www.cnblogs.com/goodspeed/p/4240417.html