코드랩 레퍼런스

Animation - Roket 본문

Animation - Roket

webstoryboy 2018.01.29 11:15

See the Pen Roket Ainmation by Webstoryboy (@webstoryboy) on CodePen.

<!DOCTYPE html>
	<html lang="ko">
	<head>
		<meta charset="UTF-8">
		<title>animation</title>
		<style>
			*,*:before,*:after {box-sizing: border-box;}
			body {background: #1d1d1d;}
			.roket-container {
				width: 220px; height: 380px;
				position: absolute;
				left: 0; top: 0; right: 0; bottom: 0; margin: auto;
				animation: vibration 0.2s infinite;
			}
			@keyframes vibration {
				0% {transform: translate(0,0) rotate(45deg);}
				50% {transform: translate(1px,-1px) rotate(45deg);}
				100% {transform: translate(0,0) rotate(45deg);}
			}
			.capsule {
				width: 111px; height: 154px;
				overflow: hidden; 
				position: absolute; left: 46px; top: 5px;
				z-index: 100;
			}
			.capsule .top {
				position: absolute; left: 0;
				width: 0; height: 0; padding:0;
				border-bottom: 62px solid #f3f3f3;
				border-left: 56px solid transparent;
				border-right: 56px solid transparent;
			}
			.capsule .top:after {
				content:'';
				position: absolute; left: 25px; top: -14px;
				width: 0; height: 0;
				border-bottom: 84px solid #1d1d1d;
				border-left: 0px solid transparent;
				border-right: 156px solid transparent;
				transform: skew(42deg);
			}
			.capsule .top .shadow {
				position: absolute;
				width: 0; height: 0;
				border-bottom: 90px solid #e0e0e0;
				border-left: 20px solid transparent;
				border-right: 80px solid transparent;
				transform: skew(25deg);
			}
			.capsule .base {
				position: absolute; left: 0; top: 62px;
				width: 112px; height: 99px; 
				background: linear-gradient(to right, #f3f3f3 63%, #e0e0e0 63%)
			}
			.window-big {
				width: 70px; height: 70px;
				background-color: #743388;
				border-radius: 50%;
				position: absolute;
				top: 57px; left: 66px;
				z-index: 110;
			}
			.window-small {
				width: 44px; height: 44px;
				background: #272425 url("http://web-d-haeju.com/svg/man.png");
				border-radius: 50%;
				position: absolute;
				left: 79px; top: 70px;
				z-index: 120;
			}
			.wing-left {
				position: absolute;
				left: 16px; top: 82px;
				height: 103px; width: 0; padding: 0;
				border-right: 38px solid #743388;
				border-bottom: 19px solid transparent;
				border-top: 21px solid transparent;
				transform: rotate(10deg) skew(5deg);
			}
			.wing-left:after {
				content:'';
				position: absolute;
				bottom: -50px;
				width: 0; height: 0;
				border-top: 20px solid transparent;
				border-right: 50px solid #1d1d1d;
				border-bottom: 50px solid transparent;
			}
			.wing-right {
				position: absolute;
				height: 97px; width: 0; padding: 0;
				top: 67px; right: 30px;
				border-right: 40px solid #743388;
				border-bottom: 15px solid transparent;
				border-top: 0px solid transparent;
				transform: rotate(-10deg) skew(-5deg);
			}
			.wing-right:after {
				content:'';
				position: absolute;
				top: -33px; left: -58px;
				width: 101px; height: 0;
				border-top: 23px solid transparent;
				border-right: 68px solid #1d1d1d;
				border-bottom: 45px solid transparent;
			}
			.tail {
				position: absolute;
				width: 101px; height: 0;
				top: 153px; left: 51px;
				border-top: 23px solid #743388;
				border-left: 9px solid transparent;
				border-right: 8px solid transparent;
				z-index: 100;
			}
			.fire-1 {
				position: absolute; z-index: 90;
				left: 64px; top: 169px;
				width: 70px; height: 70px;
				background: linear-gradient(135deg, #ef8832 50%, #e82134 50%);
				transform: rotate(-40deg) skew(1deg,-11deg);
				animation: main_fire 0.1s ease-in infinite;
			}
			@keyframes main_fire {
				0% {transform: translate(0, 5px) scale(1.1,1) rotate(-33deg) skew(0deg, -30deg);}
				100% {transform: translate(0, 0px) scale(1.1,2) rotate(-33deg) skew(0deg, -30deg);}
			}
			.fire-2 { 
				position: absolute; z-index: 90;
				left: 63px; top: 230px;
				width: 33px; height: 33px;
				background: linear-gradient(135deg, #ef8832 50%, #e82134 50%);
				transform: rotate(-33deg) skew(0deg,-30deg);
				animation: fire-2 0.3s ease-in infinite;
			}
			@keyframes fire-2 {
				0% {transform:translate(0, -10px) scale(1) rotate(-33deg) skew(0deg, -30deg); opacity:1;}
				100% {transform:translate(0, 50px) scale(0.7) rotate(-33deg) skew(0deg, -30deg); opacity:0;}
			}
			.fire-3 { 
				position: absolute; z-index: 90;
				left: 50px; top: 196px;
				width: 22px; height: 22px;
				background: linear-gradient(135deg, #ef8832 50%, #e82134 50%);
				transform: rotate(-33deg) skew(0deg,-30deg);
				animation: fire-2 0.3s 0.2s ease-in infinite;
			}
			.fire-4 { 
				position: absolute; z-index: 90;
				left: 126px; top: 200px;
				width: 22px; height: 22px;
				background: linear-gradient(135deg, #ef8832 50%, #e82134 50%);
				transform: rotate(-33deg) skew(0deg,-30deg);
				animation: fire-2 0.3s ease-in infinite;
			}
			.spark-1 {
				position: absolute;
				left: 40px; bottom: 77px;
				width: 12px; height: 12px;
				background: #e82134;
				animation: spark-fire 0.24s infinite;
			}
			.spark-2 {
				position: absolute;
				left: 132px; bottom: 68px;
				width: 10px; height: 10px;
				background: #ef8b32;
				animation: spark-fire 0.24s infinite;
			}
			.spark-3 {
				position: absolute;
				left: 109px; bottom: 80px;
				width: 10px; height: 10px;
				background: #e82134;
				animation: spark-fire 0.24s infinite;
			}
			.spark-4 {
				position: absolute;
				left: 83px; bottom: 20px;
				width: 10px; height: 10px;
				background: #ef8b32;
				animation: spark-fire 0.24s infinite;
			}
			@keyframes spark-fire {
				0% {transform: translate(0, -10px); opacity: 1;}
				100% {transform: translate(0, 50px); opacity: 0;}
			}
			.star {
				position: absolute;
				width: 4px; height: 20px;
				border-radius: 50%;
				background: linear-gradient(135deg, #fc97e9 20%, #fafc9f 80%, #bdf4f9 100%) fixed;
				animation : space 0.4s infinite;
			}
			.star-1 {left: 50px; top: -10px; animation-delay:0.1s}
			.star-2 {left: 60px; top: 90px; animation-delay:0.12s}
			.star-3 {left: 80px; top: 35px; animation-delay:0.15s}
			.star-4 {left: 130px; top: 280px; animation-delay:0.1s}
			.star-5 {left: 140px; top: 300px; animation-delay:0.34s}
			.star-6 {left: 50px; top: 60px; animation-delay:0.46s}
			.star-7 {left: -50px; top: 40px; animation-delay:0.1s}
			.star-8 {left: 150px; top: -10px; animation-delay:0.1s}
			.star-9 {left: 50px; top: 300px; animation-delay:0.32s}
			.star-10 {left: 70px; top: 80px; animation-delay:0.1s}
			.star-11 {left: 50px; top: 330px; animation-delay:0.25s}
			.star-12 {left: 80px; top: 200px; animation-delay:0.45s}
			.star-13 {left: 50px; top: 50px; animation-delay:0.1s}
			.star-14 {left: 90px; top: -10px; animation-delay:0.3s}
			.star-15 {left: 50px; top: 300px; animation-delay:0.55s}
			.star-16 {left: 100px; top: 290px; animation-delay:0.1s}
			.star-17 {left: 400px; top: 30px; animation-delay:0.2s}
			.star-18 {left: 130px; top: 260px; animation-delay:0.1s}
			.star-19 {left: 111px; top: 80px; animation-delay:0.1s}
			.star-20 {left: 50px; top: 100px; animation-delay:0.4s}

			@keyframes space {
				0% {transform: translate(0, -100px) scale(1,0); opacity:1;}
				100% {transform: translate(0, 100px) scale(1,1); opacity:0;}
			}
		</style>
	</head>
	<body>
		<div class="roket-container">
			<div class="wing-left"></div>
			<div class="wing-right"></div>
			<div class="tail"></div>

			<div class="capsule">
				<div class="top">
					<div class="shadow"></div>
				</div>
				<div class="base"></div>
			</div>

			<div class="window-big"></div>
			<div class="window-small"></div>

			<div class="fire-1"></div>
			<div class="fire-2"></div>
			<div class="fire-3"></div>
			<div class="fire-4"></div>

			<div class="spark-1"></div>
			<div class="spark-2"></div>
			<div class="spark-3"></div>
			<div class="spark-4"></div>

			<div class="star star-1"></div>
			<div class="star star-2"></div>
			<div class="star star-3"></div>
			<div class="star star-4"></div>
			<div class="star star-5"></div>
			<div class="star star-6"></div>
			<div class="star star-7"></div>
			<div class="star star-8"></div>
			<div class="star star-9"></div>
			<div class="star star-10"></div>
			<div class="star star-11"></div>
			<div class="star star-12"></div>
			<div class="star star-13"></div>
			<div class="star star-14"></div>
			<div class="star star-15"></div>
			<div class="star star-16"></div>
			<div class="star star-17"></div>
			<div class="star star-18"></div>
			<div class="star star-19"></div>
			<div class="star star-20"></div>
		</div>
	</body>
</html>  


Share

Ad

Comments
댓글쓰기 폼