<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="jelly-inner">
<div class="jelly-eyes"></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{
background-color: #DCDCDC;
}
.jelly-container {
width: 100%;
position: relative;
height: 500px ;
overflow: hidden;
background: linear-gradient(to bottom, rgba(0, 141, 210, 0.63) 0%, rgba(0, 0, 0, 0) 100% );
}
.jelly-wrapper{
width: 265px;
position: absolute;
transform: translate3D(-50%, -75%, 0);
animation: jelly-movement 10s infinite linear;
}
.jelly-hair{
height: 75px;
width: 100px;
background: linear-gradient(to bottom, rgba(239,137,26,1) 0%,rgba(239,137,26,1) 20%, rgba(235,242,138,1) 100% ); /* W3C */;
position: absolute;
left: 29%;
transform: rotate3d(0, 1, 0, 180deg) translate3d(28%, -15px, 0) rotate3d(0, 0, 1, 75deg);
border-radius: 25px;
animation: hair-movement 10s infinite linear;
}
.jelly-body {
background: linear-gradient(to bottom, rgba(0,141,210,1) 0%, rgba(235,242,138,1) 100% ); /* W3C */;
position: relative;
height: 250px;
width: 100%;
overflow: hidden;
z-index: 1;
animation: head-movement 10s infinite linear;
}
.jelly-inner {
position: absolute;
left: 50%;
top: 35%;
animation: facing-movement 10s infinite linear;
}
%jelly-eye{
content: '';
position: absolute;
height: 15px;
bottom: -25px;
width: 15px;
border-radius: 50%;
background-color: #FFF;
animation: eyes-blink 3.5s infinite linear;
}
.jelly-eyes {
position: absolute;
top: -40px;
animation: eyes-movement 10s infinite linear;
&:before{
@extend %jelly-eye;
left: 60px;
}
&:after{
@extend %jelly-eye;
left: -70px;
}
}
%jelly-hand{
content: '';
position: absolute;
height: 50px;
width: 45px;
border-top:0;
border-radius: 0 0 50% 50%;
box-shadow: 0px 5px 6px #3B949B;
}
.jelly-hands{
position: absolute;
top: 65px;
&:before{
@extend %jelly-hand;
left: 110px;
}
&:after{
@extend %jelly-hand;
left: -155px;
}
}
.jelly-mouth {
position: absolute;
height: 80px;
width: 200px;
left: 50%;
top: 35%;
transform: translate3D(-50%, 0, 0);
background-color: #F4CFD1;
border-radius: 30px;
box-shadow: 0px 0px 7px #808080;
&:after{
content: '';
position: absolute;
height: 3%;
width: 60%;
background-color: #FF9393;
left: 50%;
top: 50%;
transform: translate3D(-50%, 0, 0);
box-shadow: 0 0 3px #FF6B6B;
animation: mouth-movement 10s infinite linear;
}
}
div[class^="jelly-tentacle-"] {
height: 50px;
width: 50px;
position: absolute;
background-color:rgba(235,242,138,1);
border-radius: 0 0 25px 25px;
box-shadow: 0px 2.5px 0px #008D9B;
}
.jelly-tentacle-1{
left: 0%;
animation: tentacle-animation 1s infinite cubic-bezier(0.46, 0.2, 0.53, 0.92) -.2s;
}
.jelly-tentacle-2{
left: 25%;
transform: translate3D(-25%, 0, 0);
animation: tentacle-animation 1s infinite cubic-bezier(0.46, 0.2, 0.53, 0.92) -.4s;
}
.jelly-tentacle-3{
left: 50%;
transform: translate3D(-50%, 0, 0);
animation: tentacle-animation 1s infinite cubic-bezier(0.46, 0.2, 0.53, 0.92) -.1s;
}
.jelly-tentacle-4{
right: 25%;
transform: translate3D(25%, 0, 0);
animation: tentacle-animation 1s infinite cubic-bezier(0.46, 0.2, 0.53, 0.92) -.7s;
}
.jelly-tentacle-5{
right: 0%;
animation: tentacle-animation 1s infinite cubic-bezier(0.46, 0.2, 0.53, 0.92) -.3s;
}
.jelly-shadow{
position: absolute;
height:15px;
border-radius: 50%;
background-color: rgba(134, 134, 134, 0.23);
box-shadow: 0 0 10px rgba(134, 134, 134, 0.23);
bottom: 5%;
transform: translate3d(-50%, 0, 0);
animation: shadow-movement 10s infinite linear;
}
div[class^="bubble-"] {
height: 1px;
width: 1px;
position: absolute;
background-color:rgba(0, 141, 210, 0.3);
border-radius: 50%;
transform: translateX(-50%);
&:after {
content: '';
position: absolute;
height: 85%;
width: 85%;
border-top: 1px solid rgba(255, 255, 255, 0.63);
border-radius: 50%;
left: 50%;
top: 50%;
transform: translate3d(-50%, -50%, 0) rotateZ(-45deg);
}
}
.bubble-1{
bottom: random(10) + 1px;
left: random(99) + 1%;
animation: bubble-movement 4s infinite ease-in random(300)*-.01s;
}
.bubble-2{
bottom: random(10) + 1px;
left: random(99) + 1%;
animation: bubble-movement 4s infinite ease-in random(300)*-.01s;
}
.bubble-3{
bottom: random(10) + 1px;
left: random(99) + 1%;
animation: bubble-movement 4s infinite ease-in random(300)*-.01s;
}
.bubble-4{
bottom: random(10) + 1px;
left: random(99) + 1%;
animation: bubble-movement 4s infinite ease-in random(300)*-.01s;
}
.bubble-5{
bottom: random(10) + 1px;
left: random(99) + 1%;
animation: bubble-movement 4s infinite ease-in random(300)*-.01s;
}
.bubble-6{
bottom: random(10) + 1px;
left: random(99) + 1%;
animation: bubble-movement 4s infinite ease-in random(300)*-.01s;
}
.bubble-7{
bottom: random(10) + 1px;
left: random(99) + 1%;
animation: bubble-movement 4s infinite ease-in random(300)*-.01s;
}
.bubble-8{
bottom: random(10) + 1px;
left: random(99) + 1%;
animation: bubble-movement 4s infinite ease-in random(300)*-.01s;
}
.bubble-9{
bottom: random(10) + 1px;
left: random(99) + 1%;
animation: bubble-movement 4s infinite ease-in random(300)*-.01s;
}
.bubble-10{
bottom: random(10) + 1px;
left: random(99) + 1%;
animation: bubble-movement 4s infinite ease-in random(300)*-.01s;
}
.bubble-11{
bottom: random(10) + 1px;
left: random(99) + 1%;
animation: bubble-movement 3s infinite ease-in random(300)*-.01s;
}
.bubble-12{
bottom: random(10) + 1px;
left: random(99) + 1%;
animation: bubble-movement 3s infinite ease-in random(300)*-.01s;
}
.bubble-13{
bottom: random(10) + 1px;
left: random(99) + 1%;
animation: bubble-movement 3s infinite ease-in random(300)*-.01s;
}
.bubble-14{
bottom: random(10) + 1px;
left: random(99) + 1%;
animation: bubble-movement 3s infinite ease-in random(300)*-.01s;
}
.bubble-15{
bottom: random(10) + 1px;
left: random(99) + 1%;
animation: bubble-movement 3s infinite ease-in random(300)*-.01s;
}
.bubble-16{
bottom: random(10) + 1px;
left: random(99) + 1%;
animation: bubble-movement 3s infinite ease-in random(300)*-.01s;
}
.bubble-17{
bottom: random(10) + 1px;
left: random(99) + 1%;
animation: bubble-movement 3s infinite ease-in random(300)*-.01s;
}
.bubble-18{
bottom: random(10) + 1px;
left: random(99) + 1%;
animation: bubble-movement 3s infinite ease-in random(300)*-.01s;
}
.bubble-19{
bottom: random(10) + 1px;
left: random(99) + 1%;
animation: bubble-movement 3s infinite ease-in random(300)*-.01s;
}
.bubble-20{
bottom: random(10) + 1px;
left: random(99) + 1%;
animation: bubble-movement 3s infinite ease-in random(300)*-.01s;
}
@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% - 135px);
}
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: 135px;
}
80% {
top:55%;
}
85% {
top:50%;
}
90% {
top:55%;
}
95% {
top:50%;
}
100% {
top:55%;
left: 50%;
}
}
@keyframes tentacle-animation{
0% {bottom:-8% ;}
50% {bottom:-20% ;}
100% {bottom:-8% ;}
}
@keyframes facing-movement{
0% {left: 60%;}
20% {left: 60%;}
25% {left: 50%;}
30% {left: 40%;}
70% {left: 40%;}
75% {left: 50%;}
80% {left: 60%;}
100% {left: 60%;}
}
@keyframes mouth-movement{
0% {left: 52%;}
20% {left: 52%;}
25% {left: 50%;}
30% {left: 46%;}
70% {left: 46%;}
75% {left: 50%;}
80% {left: 52%;}
100% {left: 52%;}
}
@keyframes eyes-movement{
0% {left: 5px;}
20% {left: 5px;}
25% {left: 0px;}
30% {left: -5px;}
70% {left: -5px;}
75% {left: 0px;}
80% {left: 5px;}
100% {left: 5px;}
}
@keyframes head-movement{
0% {
border-top-right-radius: 70px;
border-top-left-radius: 90px;
}
20% {
border-top-right-radius: 70px;
border-top-left-radius: 90px;
}
25% {
border-top-right-radius: 80px;
border-top-left-radius: 80px;
}
30% {
border-top-right-radius: 90px;
border-top-left-radius: 70px;
}
70% {
border-top-right-radius: 90px;
border-top-left-radius: 70px;
}
75% {
border-top-right-radius: 80px;
border-top-left-radius: 80px;
}
80% {
border-top-right-radius: 70px;
border-top-left-radius: 90px;
}
100% {
border-top-right-radius: 70px;
border-top-left-radius: 90px;
}
}
@keyframes hair-movement{
0% {transform: rotate3d(0, 1, 0, 180deg) translate3d(28%, -2px, 0) rotate3d(0, 0, 1, 75deg);}
20% {transform: rotate3d(0, 1, 0, 180deg) translate3d(28%, -2px, 0) rotate3d(0, 0, 1, 75deg);}
25% {transform: rotate3d(0, 1, 0, 90deg) translate3d(28%, -2px, 0) rotate3d(0, 0, 1, 75deg);}
30% {transform: rotate3d(0, 1, 0, 0deg) translate3d(28%, -2px, 0) rotate3d(0, 0, 1, 75deg);}
70% {transform: rotate3d(0, 1, 0, 0deg) translate3d(28%, -2px, 0) rotate3d(0, 0, 1, 75deg);}
75% {transform: rotate3d(0, 1, 0, 90deg) translate3d(28%, -2px, 0) rotate3d(0, 0, 1, 75deg);}
80% {transform: rotate3d(0, 1, 0, 180deg) translate3d(28%, -2px, 0) rotate3d(0, 0, 1, 75deg);}
100% {transform: rotate3d(0, 1, 0, 180deg) translate3d(28%, -2px, 0) rotate3d(0, 0, 1, 75deg);}
}
@keyframes shadow-movement{
0% {
width:250px;
left: 50%;
}
5% {
width:210px;
}
10% {
width:250px;
}
15% {
width:210px;
}
20% {
width:250px;
}
25% {
width:210px;
left: calc(100% - 135px);
}
30% {
width:250px;
}
35% {
width:210px;
}
40% {
width:250px;
}
45% {
width:210px;
}
50% {
width:250px;
left: 50%;
}
55% {
width:210px;
}
60% {
width:250px;
}
65% {
width:210px;
}
70% {
width:250px;
}
75% {
width:210px;
left: 135px;
}
80% {
width:250px;
}
85% {
width:210px;
}
90% {
width:250px;
}
95% {
width:210px;
}
100% {
width:250px;
left: 50%;
}
}
@keyframes eyes-blink{
0% {height:15px}
3% {height:1px}
5% {height:15px}
100% {height:15px}
}
@keyframes bubble-movement{
0% {
transform: translate3d(-50%, 0, 0);
height: 1px;
width: 1px;
}
100% {
transform: translate3d(-50%, -500px, 0);
height: 75px;
width: 75px;
}
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.