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>

查看全文

相关阅读:
微信公众号，图片预览功能有单个图片，
MUI
MUI学习01-顶部导航栏
 php验证18位身份证，准到必须输入正确的身份证号，
微信sdk 图片上传两种方法上传一张显示一张并附带微信图片放大功能和删除功能
 jQuery实现限制input框 textarea文本框输入字符数量的方法
 js jq 手机号实现(344) 附带删除功能 jq 实现银行卡没四个数加一个空格附带删除功能
 山东省2016acm省赛
 East Central North America Region 2015
North America Qualifier (2015)

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