Goodspeed

导航

火箭起飞 

<!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>

 

posted on 2015-01-21 23:25  Goodspeed  阅读(393)  评论(0)    收藏  举报