코드랩 레퍼런스
Animation - Tentacle 본문
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