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