코드랩 레퍼런스

Animation - Tentacle 본문

Animation - Tentacle

webstoryboy 2018.01.29 10:16

See the Pen Tentacle Animation by Webstoryboy (@webstoryboy) on CodePen.

<!DOCTYPE html>
	<html lang="ko">
	<head>
		<meta charset="UTF-8">
		<title>animation</title>
		<style>
			.jelly-container{
				width: 100%;
				overflow: hidden;
				height: 100vh;
				background: linear-gradient(to bottom, rgba(1,141,210,0.63), transparent); 
			}
			div[class^="bubble-"]{
				width: 75px; height: 75px;
				background-color: rgba(0,141,210,0.3);
				border-radius: 50%;
				position: absolute;
			}
			div[class^="bubble-"]:after{
				content:'';
				border-top: 1px solid rgba(255,255,255,0.63);
				position: absolute; left: 50%; top: 50%;
				transform: translate(-50%, -50%) rotate(-45deg);
				width: 85%; height: 85%;
				border-radius: 50%;
			}
			.bubble-1 { bottom: 6px; left: 30%; animation: bubble-movemont 4s infinite ease-in -0.6s;}
			.bubble-2 { bottom: 6px; left: 53%; animation: bubble-movemont 4s infinite ease-in -1.2s;}
			.bubble-3 { bottom: 6px; left: 10%; animation: bubble-movemont 4s infinite ease-in -0.8s;}
			.bubble-4 { bottom: 6px; left: 86%; animation: bubble-movemont 4s infinite ease-in -0.4s;}
			.bubble-5 { bottom: 6px; left: 50%; animation: bubble-movemont 4s infinite ease-in -1.5s;}
			.bubble-6 { bottom: 6px; left: 62%; animation: bubble-movemont 4s infinite ease-in -2.0s;}
			.bubble-7 { bottom: 6px; left: 90%; animation: bubble-movemont 4s infinite ease-in -1.2s;}
			.bubble-8 { bottom: 6px; left: 65%; animation: bubble-movemont 4s infinite ease-in -1.6s;}
			.bubble-9 { bottom: 6px; left: 46%; animation: bubble-movemont 4s infinite ease-in -0.6s;}
			.bubble-10 {bottom: 6px; left: 23%; animation: bubble-movemont 4s infinite ease-in -0.3s;}
			.bubble-11 {bottom: 6px; left: 61%; animation: bubble-movemont 4s infinite ease-in -0.9s;}
			.bubble-12 {bottom: 6px; left: 83%; animation: bubble-movemont 4s infinite ease-in -1.5s;}
			.bubble-13 {bottom: 6px; left: 94%; animation: bubble-movemont 4s infinite ease-in -1.8s;}
			.bubble-14 {bottom: 6px; left: 36%; animation: bubble-movemont 4s infinite ease-in -2.2s;}
			.bubble-15 {bottom: 6px; left: 50%; animation: bubble-movemont 4s infinite ease-in -1.4s;}
			.bubble-16 {bottom: 6px; left: 62%; animation: bubble-movemont 4s infinite ease-in -1.6s;}
			.bubble-17 {bottom: 6px; left: 20%; animation: bubble-movemont 4s infinite ease-in -1.4s;}
			.bubble-18 {bottom: 6px; left: 40%; animation: bubble-movemont 4s infinite ease-in -0.5s;}
			.bubble-19 {bottom: 6px; left: 56%; animation: bubble-movemont 4s infinite ease-in -0.3s;}
			.bubble-20 {bottom: 6px; left: 69%; animation: bubble-movemont 4s infinite ease-in -0.4s;}

			@keyframes bubble-movemont {
				0% {width: 1px; height: 1px; transform: translatey(0);}
				100% {width: 75px; height: 75px; transform: translatey(-1000%);}
			}
			.jelly-wrapper {
				width: 256px; height: 300px;
				position: absolute; left: 50%; top:50%;
				transform: translate(-50%,-50%);
				animation: jelly-movement 10s infinite linear;
			}
			@keyframes jelly-movement  {
				0%   {top: 55%; left: 50%;}
				5%   {top: 50%;}
				10%  {top: 55%;}
				15%  {top: 50%;}
				20%  {top: 55%;}
				25%  {top: 50%; left: calc(100% - 150px); }
				30%  {top: 55%;}
				35%  {top: 50%;}
				40%  {top: 55%;}
				45%  {top: 50%;}
				50%  {top: 55%; left: 50%;}
				55%  {top: 50%;}
				60%  {top: 55%;}
				65%  {top: 50%;}
				70%  {top: 55%;}
				75%  {top: 50%; left: 150px;}
				80%  {top: 55%;}
				85%  {top: 50%;}
				90%  {top: 55%;}
				95%  {top: 50%;}
				100% {top: 55%; left: 50%;}
			}
			.jelly-hair {
				width: 100px; height: 75px;
				background: linear-gradient(to bottom, #ef891a 0%, #ef891a 2%, #ebf28a 100%);
				position: absolute; left: 30%; top:-10px;
				border-radius: 25px;
				z-index: -2;
				animation: hair 10s infinite linear;
			}
			@keyframes hair {
				0%  {transform: rotate3d(0,1,0,180deg) rotate3d(0,0,1,75deg);}
				20% {transform: rotate3d(0,1,0,180deg) rotate3d(0,0,1,75deg);}
				25% {transform: rotate3d(0,1,0,90deg) rotate3d(0,0,1,75deg);}
				30% {transform: rotate3d(0,1,0,0deg) rotate3d(0,0,1,75deg);}
				70% {transform: rotate3d(0,1,0,0deg) rotate3d(0,0,1,75deg);}
				75% {transform: rotate3d(0,1,0,90deg) rotate3d(0,0,1,75deg);}
				80% {transform: rotate3d(0,1,0,180deg) rotate3d(0,0,1,75deg);}
				100% {transform: rotate3d(0,1,0,180deg) rotate3d(0,0,1,75deg);}
			}
			.jelly-body {
				width: 100%; height: 250px;
				background: linear-gradient(to bottom, #009dd2, #ebf28a);
				border-top-left-radius: 70px;
				border-top-right-radius: 90px;
				z-index: 1;
				position: relative;
				overflow: hidden;
				animation: head-movemoent 10s infinite linear;
			}
			@keyframes head-movemoent {
				0% {
					border-top-left-radius: 70px;
					border-top-right-radius: 90px;
				}
				20% {
					border-top-left-radius: 70px;
					border-top-right-radius: 90px;
				}
				25% {
					border-top-left-radius: 80px;
					border-top-right-radius: 80px;
				}
				30% {
					border-top-left-radius: 90px;
					border-top-right-radius: 70px;
				}
				70% {
					border-top-left-radius: 90px;
					border-top-right-radius: 70px;
				}
				75% {
					border-top-left-radius: 80px;
					border-top-right-radius: 80px;
				}
				80% {
					border-top-left-radius: 70px;
					border-top-right-radius: 90px;
				}
				100% {
					border-top-left-radius: 70px;
					border-top-right-radius: 90px;
				}
			}	
			.jelley-inner {
				/*width: 100%; height: 200px;
				background: #fff;*/
				position: absolute; left: 50%; top: 35%;
				animation: move 10s infinite linear;
			}
			@keyframes move {
				0% {left: 60%;}
				20% {left: 60%;}
				25% {left: 50%;}
				30% {left: 40%;}
				70% {left: 40%;}
				75% {left: 50%;}
				80% {left: 60%;}
				100% {left: 60%;}
			}
			.jelly-eye { 
				position: absolute; top: -40px;
			}
			.jelly-eye:before { 
				content:'';
				position: absolute; left: 60px;
				width: 20px; height: 20px;
				background:#fff;
				border-radius: 50%;
			}
			.jelly-eye:after { 
				content:'';
				position: absolute; left: -60px;
				width: 20px; height: 20px;
				background:#fff;
				border-radius: 50%;
				animation: eyes-blink 3.5s infinite linear;
			}
			@keyframes eyes-blink {
				0% {height: 20px; }
				2% {height: 1px;}
				4% {height: 20px; }
				100% {height: 20px; }
			}
			.jelly-mouth {
				position: absolute; 
				width: 200px; height: 80px;
				background: #f4cfd1;
				border-radius: 30px;
				transform: translatex(-50%);
			}
			.jelly-mouth:after {
				content:'';
				position: absolute; left: 50%; top: 50%;
				width: 60%; height: 1px;
				background: #ff9393;
				transform: translatex(-50%);
				box-shadow: 0 0 1px #ff6868;
			}
			.jelly-hands {
				position: absolute; top: 65px;
			}
			.jelly-hands:before{
				content:'';
				width: 45px; height: 50px;
				box-shadow: 0px 5px 6px #3b949b;
				position: absolute;
				left: 110px;
				border-radius: 0 0 50% 50%;
			}
			.jelly-hands:after{
				content:'';
				width: 45px; height: 50px;
				box-shadow: 0px 5px 6px #3b949b;
				position: absolute;
				left: -155px;
				border-radius: 0 0 50% 50%;
			}
			.jelly-tentacle-1 {
				width: 50px; height: 50px;
				background: #ebf28a;
				border-radius: 0 0 50% 50%;
				box-shadow: 0 2.5px 0 #008d98;
				position: absolute;
				left: 0%;
				animation: tentacle 1s infinite ease-in;
			}
			.jelly-tentacle-2 {
				width: 50px; height: 50px;
				background: #ebf28a;
				border-radius: 0 0 50% 50%;
				box-shadow: 0 2.5px 0 #008d98;
				position: absolute;
				left: 20%;
				animation: tentacle 1s infinite ease-in -0.7s;
			}
			.jelly-tentacle-3 {
				width: 50px; height: 50px;
				background: #ebf28a;
				border-radius: 0 0 50% 50%;
				box-shadow: 0 2.5px 0 #008d98;
				position: absolute;
				left: 40%;
				animation: tentacle 1s infinite ease-in -0.2s;
			}
			.jelly-tentacle-4 {
				width: 50px; height: 50px;
				background: #ebf28a;
				border-radius: 0 0 50% 50%;
				box-shadow: 0 2.5px 0 #008d98;
				position: absolute;
				left: 60%;
				animation: tentacle 1s infinite ease-in -0.5s;
			}
			.jelly-tentacle-5 {
				width: 50px; height: 50px;
				background: #ebf28a;
				border-radius: 0 0 50% 50%;
				box-shadow: 0 2.5px 0 #008d98;
				position: absolute;
				left: 80%; bottom:0;
				animation: tentacle 1s infinite ease-in -0.2s;
			}
			@keyframes tentacle {
				0% {bottom: 0%}
				50% {bottom: 8%}
				100% {bottom: 0%}
			}
			.jelly-shadow {
				position: absolute; bottom: 5%; left: 50%;
				transform: translatex(-50%);
				border-radius: 50%;
				background-color: rgba(134,134,134,0.23);
				box-shadow: 0 0 10px rgba(134,134,134,0.23);
				width: 250px; height: 15px;
				animation: shadow 10s infinite linear;
			}
			@keyframes shadow  {
				0%   {width: 250px; left: 50%;}
				5%   {width: 200px;}
				10%  {width: 250px;}
				15%  {width: 200px;}
				20%  {width: 250px;}
				25%  {width: 200px; left: calc(100% - 150px); }
				30%  {width: 250px;}
				35%  {width: 200px;}
				40%  {width: 250px;}
				45%  {width: 200px;}
				50%  {width: 250px; left: 50%;}
				55%  {width: 200px;}
				60%  {width: 250px;}
				65%  {width: 200px;}
				70%  {width: 250px;}
				75%  {width: 200px; left: 150px;}
				80%  {width: 250px;}
				85%  {width: 200px;}
				90%  {width: 250px;}
				95%  {width: 200px;}
				100% {width: 250px; left: 50%;}
			}
		</style>
	</head>
	<body>
		<div class="jelly-container">
			<div class="bubble-1"></div>
			<div class="bubble-2"></div>
			<div class="bubble-3"></div>
			<div class="bubble-4"></div>
			<div class="bubble-5"></div>
			<div class="bubble-6"></div>
			<div class="bubble-7"></div>
			<div class="bubble-8"></div>
			<div class="bubble-9"></div>
			<div class="bubble-10"></div>
			<div class="jelly-wrapper">
				<div class="jelly-hair"></div>
				<div class="jelly-body">
					<div class="jelley-inner">
						<div class="jelly-eye"></div>
						<div class="jelly-mouth"></div>
						<div class="jelly-hands"></div>
					</div>
				</div>
				<div class="jelly-tentacle-1"></div>
				<div class="jelly-tentacle-2"></div>
				<div class="jelly-tentacle-3"></div>
				<div class="jelly-tentacle-4"></div>
				<div class="jelly-tentacle-5"></div>
			</div>
			<div class="jelly-shadow"></div>
			<div class="bubble-11"></div>
			<div class="bubble-12"></div>
			<div class="bubble-13"></div>
			<div class="bubble-14"></div>
			<div class="bubble-15"></div>
			<div class="bubble-16"></div>
			<div class="bubble-17"></div>
			<div class="bubble-18"></div>
			<div class="bubble-19"></div>
			<div class="bubble-20"></div>
		</div>

	</body>
</html>  

Share

Ad

Comments
댓글쓰기 폼