Pure CSS Flying Rocket

Fungsi : Hiasan, Bisa buat belajar CSS animate juga.

Tingkat kesulitan : Mudah.

Bahasa Pemrograman : CSS, HTML

File Eksternal : -

Source code : Mirko

---

HTML

<div id="boxs">
        <div id="rocketBody">
            <div id="window"></div>
            <div id="window2"></div>
            <div id="nose"></div>
            <div id="innerNose"></div>
            <div id="wing"></div>
            <div id="insideWing1"></div>
            <div id="wing2"></div>
            <div id="insideWing2"></div>
           
        </div>
            <div id="nosel"></div>
            <div id="innerNosel"></div>
        <div id="exaust">
                <div id="bubble"></div>
                <div id="triangle"></div>
        </div>
</div>

CSS

#boxs{position:relative;left:0;right:0;top:0;margin:auto;height:300px;width:300px;-webkit-animation:rocket;animation:rocket;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-duration:4s;animation-duration:4s;-webkit-transform-origin:center;transform-origin:center;-webkit-animation-timing-function:linear;animation-timing-function:linear}
#rocketBody{position:relative;height:154px;width:55px;margin:30% auto;border:2px solid #222;z-index:20;background-color:#fff}
#window{position:relative;height:20%;width:50%;top:10%;margin:auto;border-radius:50%;border:2px solid #222}
#nose{position:absolute;top:-52.5px;left:-1.5px;border-style:solid;border-width:0 29px 50px 29px;border-color:transparent transparent #222 transparent}
#innerNose{position:absolute;top:-48px;left:2.5px;border-style:solid;border-width:0 25px 44px 25px;border-color:transparent transparent #fff transparent}
#wing{position:absolute;left:-63px;top:94px;border-width:30px 30px 30px 30px;border-color:transparent #222 #222 transparent;border-style:solid}
#wing2{position:absolute;right:-63px;top:94px;border-width:30px 30px 30px 30px;border-color:transparent transparent #222 #222;border-style:solid}
#insideWing2{position:absolute;right:-58.5px;top:98px;border-width:27px 27px 27px 27px;border-color:transparent transparent #fff #fff;border-style:solid;z-index:2}
#insideWing1{position:absolute;left:-59px;top:98px;border-width:27px 27px 27px 27px;border-color:transparent #fff #fff transparent;border-style:solid}
#nosel{position:absolute;margin:-35% 41% 0 41%;left:6px;border-style:solid;border-width:0 22px 30px 22px;border-color:transparent transparent #222 transparent}
#innerNosel{position:absolute;margin:-34.5% 41% 0 41%;left:8px;border-style:solid;border-width:0 20px 27px 20px;border-color:transparent transparent #fff transparent;z-index:3}
#exaust{position:absolute;left:3px;top:25%;height:50px;width:50px;margin:30% 41% 0 41%;-webkit-animation:exaust;animation:exaust;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-duration:.1s;animation-duration:.1s;z-index:2}
#bubble{position:relative;height:60%;width:72%;background:#222;border-radius:50%;margin:auto}
#triangle{height:100%;position:absolute;top:20px;left:9.1px;border-style:solid;border-width:20px 16px 0 16px;border-color:#222 transparent transparent transparent;-webkit-animation:subExaust;animation:subExaust;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-duration:.1s;animation-duration:.1s}
-webkit-keyframes rocket{25%{-webkit-transform:rotate(2deg);transform:rotate(2deg)}
75%{-webkit-transform:rotate(-2deg);transform:rotate(-2deg)}}
@-webkit-keyframes rocket{25%{-webkit-transform:rotate(2deg);transform:rotate(2deg)}
75%{-webkit-transform:rotate(-2deg);transform:rotate(-2deg)}}
@keyframes rocket{25%{-webkit-transform:rotate(2deg);transform:rotate(2deg)}
75%{-webkit-transform:rotate(-2deg);transform:rotate(-2deg)}}
@-webkit-keyframes exaust{0{height:50px}
100%{height:40px}}
@keyframes exaust{0{height:50px}
100%{height:40px}}
@-webkit-keyframes subExaust{0{top:20px}
100%{top:18px}}
@keyframes subExaust{0{top:20px}
100%{top:18px}}