Flying Rocket by
Luiz Otávio
On: 5 Aug 2016
Personal site: http://codepen.io/superoak
<div class="world-wrapper">
<div class="world"></div>
<div class="rocket">
<div class="rocket-body">
<div class="fin-top"></div>
<div class="fin-bottom"></div>
<div class="faya"></div>
<div class="wastes">
<span></span><span></span><span></span><span></span><span></span>
</div>
</div>
</div>
</div>
body {
background-color: #11141b;
}
.world-wrapper {
position: absolute;
left: 50%;
top: 50px;
margin-left: -150px;
border-radius: 50%;
}
.world {
position: relative;
-webkit-transform: translateZ(0);
transform: translateZ(0);
overflow: hidden;
border-radius: 50%;
z-index: 10;
display: inline-block;
width: 300px;
height: 300px;
background: #2f7db4;
}
.world:before {
box-shadow: inset -30px 0 0 -10px rgba(0, 0, 0, 0.3);
border-radius: 50%;
content: " ";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: transparent;
z-index: 50;
zoom: 3;
}
.world:after {
border-radius: 6px;
-webkit-animation: world-animation 14s linear 0s infinite;
animation: world-animation 14s linear 0s infinite;
zoom: 3;
content: " ";
position: absolute;
top: 0px;
left: 0px;
width: 18px;
height: 12px;
background: none;
z-index: 10;
}
.rocket {
z-index: 20;
position: absolute;
left: 10px;
top: 10px;
-webkit-transform: rotate(-35deg);
transform: rotate(-35deg);
-webkit-animation: orbit 2s linear infinite;
animation: orbit 2s linear infinite;
}
.rocket .rocket-body {
width: 65px;
height: 20px;
background-color: #d11c40;
position: absolute;
border-bottom-right-radius: 100%;
border-top-right-radius: 100%;
border-left: 3px solid #5b595d;
border-right: 3px solid #D11C40;
-webkit-animation: wiggling ease-out 300ms infinite;
animation: wiggling ease-out 300ms infinite;
}
.rocket .rocket-body:before, .rocket .rocket-body:after {
content: '';
position: absolute;
display: block;
width: 51%;
top: 50%;
height: 50%;
background-color: #a71732;
}
.rocket .rocket-body:before {
right: 0;
border-bottom-right-radius: 100%;
}
.rocket .rocket-body:after {
left: -3px;
border-left: 3px solid #444244;
}
.rocket .rocket-body .fin-top,
.rocket .rocket-body .fin-bottom {
position: absolute;
left: -4px;
width: 10px;
height: 10px;
background-color: #7f0e27;
border-left: 3px solid #D11C40;
}
.rocket .rocket-body .fin-top:before,
.rocket .rocket-body .fin-bottom:before {
content: '';
position: absolute;
left: 5px;
width: 10px;
height: 100%;
background-color: #7f0e27;
bottom: 0;
}
.rocket .rocket-body .fin-top {
top: -10px;
-webkit-transform: skew(35deg, 0deg);
transform: skew(35deg, 0deg);
}
.rocket .rocket-body .fin-top:before {
-webkit-transform: skew(40deg, 0deg);
transform: skew(40deg, 0deg);
}
.rocket .rocket-body .fin-bottom {
bottom: -10px;
-webkit-transform: skew(-35deg, 0deg);
transform: skew(-35deg, 0deg);
}
.rocket .rocket-body .fin-bottom:before {
-webkit-transform: skew(-40deg, 0deg);
transform: skew(-40deg, 0deg);
}
.rocket .rocket-body .faya {
position: absolute;
display: block;
left: -33px;
width: 30px;
height: 100%;
overflow: hidden;
}
.rocket .rocket-body .faya:before {
position: absolute;
content: '';
display: block;
width: 220px;
height: 20px;
left: 0;
top: 0;
border-radius: 100%;
background-color: #f45224;
-webkit-animation: vrouming 200ms infinite;
animation: vrouming 200ms infinite;
}
.rocket .rocket-body .faya:after {
position: absolute;
content: '';
display: block;
width: 220px;
height: 10px;
left: 10px;
top: 5px;
border-radius: 100%;
background-color: #ffedd5;
-webkit-animation: vrouming 200ms infinite;
animation: vrouming 200ms infinite;
}
.rocket .rocket-body .wastes {
position: absolute;
left: -53px;
top: -10px;
width: 50px;
height: 200%;
}
.rocket .rocket-body .wastes span {
position: absolute;
width: 3px;
right: 0;
height: 1px;
background-color: rgba(255, 255, 255, 0.5);
}
.rocket .rocket-body .wastes span:nth-child(1) {
top: 15px;
-webkit-animation: wasting 500ms infinite 100ms;
animation: wasting 500ms infinite 100ms;
}
.rocket .rocket-body .wastes span:nth-child(2) {
top: 17px;
-webkit-animation: wasting2 500ms infinite 200ms;
animation: wasting2 500ms infinite 200ms;
}
.rocket .rocket-body .wastes span:nth-child(3) {
top: 19px;
-webkit-animation: wasting 500ms infinite 300ms;
animation: wasting 500ms infinite 300ms;
}
.rocket .rocket-body .wastes span:nth-child(4) {
top: 21px;
-webkit-animation: wasting2 500ms infinite 400ms;
animation: wasting2 500ms infinite 400ms;
}
.rocket .rocket-body .wastes span:nth-child(5) {
top: 23px;
-webkit-animation: wasting 500ms infinite 500ms;
animation: wasting 500ms infinite 500ms;
}
@-webkit-keyframes wiggling {
0% {
-webkit-transform: translate3d(0px, 0px, 0);
transform: translate3d(0px, 0px, 0);
}
50% {
-webkit-transform: translate3d(0px, -4px, 0);
transform: translate3d(0px, -4px, 0);
}
100% {
-webkit-transform: translate3d(0px, 0px, 0);
transform: translate3d(0px, 0px, 0);
}
}
@keyframes wiggling {
0% {
-webkit-transform: translate3d(0px, 0px, 0);
transform: translate3d(0px, 0px, 0);
}
50% {
-webkit-transform: translate3d(0px, -4px, 0);
transform: translate3d(0px, -4px, 0);
}
100% {
-webkit-transform: translate3d(0px, 0px, 0);
transform: translate3d(0px, 0px, 0);
}
}
@-webkit-keyframes vrouming {
0% {
-webkit-transform: translate3d(0px, 0, 0);
transform: translate3d(0px, 0, 0);
}
50% {
-webkit-transform: translate3d(5px, 0, 0);
transform: translate3d(5px, 0, 0);
}
100% {
-webkit-transform: translate3d(0px, 0, 0);
transform: translate3d(0px, 0, 0);
}
}
@keyframes vrouming {
0% {
-webkit-transform: translate3d(0px, 0, 0);
transform: translate3d(0px, 0, 0);
}
50% {
-webkit-transform: translate3d(5px, 0, 0);
transform: translate3d(5px, 0, 0);
}
100% {
-webkit-transform: translate3d(0px, 0, 0);
transform: translate3d(0px, 0, 0);
}
}
@-webkit-keyframes wasting {
0% {
-webkit-transform: translate3d(0px, 0, 0);
transform: translate3d(0px, 0, 0);
}
100% {
-webkit-transform: translate3d(-40px, -5px, 0);
transform: translate3d(-40px, -5px, 0);
}
}
@keyframes wasting {
0% {
-webkit-transform: translate3d(0px, 0, 0);
transform: translate3d(0px, 0, 0);
}
100% {
-webkit-transform: translate3d(-40px, -5px, 0);
transform: translate3d(-40px, -5px, 0);
}
}
@-webkit-keyframes wasting2 {
0% {
-webkit-transform: translate3d(0px, 0, 0);
transform: translate3d(0px, 0, 0);
}
100% {
-webkit-transform: translate3d(-40px, 5px, 0);
transform: translate3d(-40px, 5px, 0);
}
}
@keyframes wasting2 {
0% {
-webkit-transform: translate3d(0px, 0, 0);
transform: translate3d(0px, 0, 0);
}
100% {
-webkit-transform: translate3d(-40px, 5px, 0);
transform: translate3d(-40px, 5px, 0);
}
}
@-webkit-keyframes world-animation {
0% {
box-shadow: -253px 16px 0 0 rgba(255, 255, 255, 0.8), -213px 41px 0 1px rgba(255, 255, 255, 0.8), -191px -1px 0 0 rgba(255, 255, 255, 0.8), -160px 59px 0 -2px rgba(255, 255, 255, 0.8), -226px 83px 0 3px rgba(255, 255, 255, 0.8), -109px 32px 0 0 rgba(255, 255, 255, 0.8), -90px 89px 0 1px rgba(255, 255, 255, 0.8), -160px 110px 0 -2px rgba(255, 255, 255, 0.8), -53px 16px 0 0 rgba(255, 255, 255, 0.8), -13px 41px 0 1px rgba(255, 255, 255, 0.8), 9px -1px 0 0 rgba(255, 255, 255, 0.8), 40px 59px 0 -2px rgba(255, 255, 255, 0.8), -26px 83px 0 3px rgba(255, 255, 255, 0.8), 91px 32px 0 0 rgba(255, 255, 255, 0.8), 110px 89px 0 1px rgba(255, 255, 255, 0.8), 40px 110px 0 -2px rgba(255, 255, 255, 0.8), 0 10px 0 3px #81c763, 6px 10px 0 3px #81c763, 3px 20px 0 -4px #81c763, 3px 24px 0 -2px #81c763, 9px 24px 0 -2px #81c763, -20px 50px 0 -2px #81c763, 30px 78px 0 2px #81c763, 74px 108px 0 -2px #81c763, 60px 32px 0 -3px #81c763, 85px 69px 0 0 #81c763, 100px 0 0 0 #81c763, 140px 42px 0 0 #81c763, 143px 32px 0 -4px #81c763, 220px 10px 0 3px #81c763, 226px 10px 0 3px #81c763, 223px 20px 0 -4px #81c763, 223px 24px 0 -2px #81c763, 229px 24px 0 -2px #81c763, 200px 50px 0 -2px #81c763, 250px 78px 0 2px #81c763, 294px 108px 0 -2px #81c763, 280px 32px 0 -3px #81c763, 305px 69px 0 0 #81c763, 300px 0 0 0 #81c763, 360px 42px 0 0 #81c763, 363px 32px 0 -4px #81c763;
}
100% {
box-shadow: -53px 16px 0 0 rgba(255, 255, 255, 0.8), -13px 41px 0 1px rgba(255, 255, 255, 0.8), 9px -1px 0 0 rgba(255, 255, 255, 0.8), 40px 59px 0 -2px rgba(255, 255, 255, 0.8), -26px 83px 0 3px rgba(255, 255, 255, 0.8), 91px 32px 0 0 rgba(255, 255, 255, 0.8), 110px 89px 0 1px rgba(255, 255, 255, 0.8), 40px 110px 0 -2px rgba(255, 255, 255, 0.8), 147px 16px 0 0 rgba(255, 255, 255, 0.8), 187px 41px 0 1px rgba(255, 255, 255, 0.8), 209px -1px 0 0 rgba(255, 255, 255, 0.8), 240px 59px 0 -2px rgba(255, 255, 255, 0.8), 174px 83px 0 3px rgba(255, 255, 255, 0.8), 291px 32px 0 0 rgba(255, 255, 255, 0.8), 310px 89px 0 1px rgba(255, 255, 255, 0.8), 240px 110px 0 -2px rgba(255, 255, 255, 0.8), -220px 10px 0 3px #81c763, -214px 10px 0 3px #81c763, -217px 20px 0 -4px #81c763, -217px 24px 0 -2px #81c763, -211px 24px 0 -2px #81c763, -240px 50px 0 -2px #81c763, -190px 78px 0 2px #81c763, -146px 108px 0 -2px #81c763, -160px 32px 0 -3px #81c763, -135px 69px 0 0 #81c763, -120px 0 0 0 #81c763, -80px 42px 0 0 #81c763, -77px 32px 0 -4px #81c763, 0 10px 0 3px #81c763, 6px 10px 0 3px #81c763, 3px 20px 0 -4px #81c763, 3px 24px 0 -2px #81c763, 9px 24px 0 -2px #81c763, -20px 50px 0 -2px #81c763, 30px 78px 0 2px #81c763, 74px 108px 0 -2px #81c763, 60px 32px 0 -3px #81c763, 85px 69px 0 0 #81c763, 100px 0 0 0 #81c763, 140px 42px 0 0 #81c763, 143px 32px 0 -4px #81c763;
}
}
@keyframes world-animation {
0% {
box-shadow: -253px 16px 0 0 rgba(255, 255, 255, 0.8), -213px 41px 0 1px rgba(255, 255, 255, 0.8), -191px -1px 0 0 rgba(255, 255, 255, 0.8), -160px 59px 0 -2px rgba(255, 255, 255, 0.8), -226px 83px 0 3px rgba(255, 255, 255, 0.8), -109px 32px 0 0 rgba(255, 255, 255, 0.8), -90px 89px 0 1px rgba(255, 255, 255, 0.8), -160px 110px 0 -2px rgba(255, 255, 255, 0.8), -53px 16px 0 0 rgba(255, 255, 255, 0.8), -13px 41px 0 1px rgba(255, 255, 255, 0.8), 9px -1px 0 0 rgba(255, 255, 255, 0.8), 40px 59px 0 -2px rgba(255, 255, 255, 0.8), -26px 83px 0 3px rgba(255, 255, 255, 0.8), 91px 32px 0 0 rgba(255, 255, 255, 0.8), 110px 89px 0 1px rgba(255, 255, 255, 0.8), 40px 110px 0 -2px rgba(255, 255, 255, 0.8), 0 10px 0 3px #81c763, 6px 10px 0 3px #81c763, 3px 20px 0 -4px #81c763, 3px 24px 0 -2px #81c763, 9px 24px 0 -2px #81c763, -20px 50px 0 -2px #81c763, 30px 78px 0 2px #81c763, 74px 108px 0 -2px #81c763, 60px 32px 0 -3px #81c763, 85px 69px 0 0 #81c763, 100px 0 0 0 #81c763, 140px 42px 0 0 #81c763, 143px 32px 0 -4px #81c763, 220px 10px 0 3px #81c763, 226px 10px 0 3px #81c763, 223px 20px 0 -4px #81c763, 223px 24px 0 -2px #81c763, 229px 24px 0 -2px #81c763, 200px 50px 0 -2px #81c763, 250px 78px 0 2px #81c763, 294px 108px 0 -2px #81c763, 280px 32px 0 -3px #81c763, 305px 69px 0 0 #81c763, 300px 0 0 0 #81c763, 360px 42px 0 0 #81c763, 363px 32px 0 -4px #81c763;
}
100% {
box-shadow: -53px 16px 0 0 rgba(255, 255, 255, 0.8), -13px 41px 0 1px rgba(255, 255, 255, 0.8), 9px -1px 0 0 rgba(255, 255, 255, 0.8), 40px 59px 0 -2px rgba(255, 255, 255, 0.8), -26px 83px 0 3px rgba(255, 255, 255, 0.8), 91px 32px 0 0 rgba(255, 255, 255, 0.8), 110px 89px 0 1px rgba(255, 255, 255, 0.8), 40px 110px 0 -2px rgba(255, 255, 255, 0.8), 147px 16px 0 0 rgba(255, 255, 255, 0.8), 187px 41px 0 1px rgba(255, 255, 255, 0.8), 209px -1px 0 0 rgba(255, 255, 255, 0.8), 240px 59px 0 -2px rgba(255, 255, 255, 0.8), 174px 83px 0 3px rgba(255, 255, 255, 0.8), 291px 32px 0 0 rgba(255, 255, 255, 0.8), 310px 89px 0 1px rgba(255, 255, 255, 0.8), 240px 110px 0 -2px rgba(255, 255, 255, 0.8), -220px 10px 0 3px #81c763, -214px 10px 0 3px #81c763, -217px 20px 0 -4px #81c763, -217px 24px 0 -2px #81c763, -211px 24px 0 -2px #81c763, -240px 50px 0 -2px #81c763, -190px 78px 0 2px #81c763, -146px 108px 0 -2px #81c763, -160px 32px 0 -3px #81c763, -135px 69px 0 0 #81c763, -120px 0 0 0 #81c763, -80px 42px 0 0 #81c763, -77px 32px 0 -4px #81c763, 0 10px 0 3px #81c763, 6px 10px 0 3px #81c763, 3px 20px 0 -4px #81c763, 3px 24px 0 -2px #81c763, 9px 24px 0 -2px #81c763, -20px 50px 0 -2px #81c763, 30px 78px 0 2px #81c763, 74px 108px 0 -2px #81c763, 60px 32px 0 -3px #81c763, 85px 69px 0 0 #81c763, 100px 0 0 0 #81c763, 140px 42px 0 0 #81c763, 143px 32px 0 -4px #81c763;
}
}
34