<svg>
<defs>
<filter id="goo">
<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="name"/>
<feColorMatrix in="name" mode="matrix" values="1 0 0 0 0
0 1 0 0 0
0 0 1 0 0
0 0 0 15 -10" result="b"/>
<feBlend in="SourceGraphic" in2="b" />
</filter>
</defs>
</svg>
<div class="wrapper">
<div id="container">
<p class="text">DROP</p>
<div class="drop"></div>
</div>
</div>
@import url('https://fonts.googleapis.com/css?family=Anton&display=swap');
$startPosX: 120%;
$startPosY: -800%;
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
svg{
position: absolute;
}
.wrapper{
width: 100%;
height: 100vh;
overflow: hidden;
background-color: #275EFE;
}
#container{
height: 200px;
width: 200px;
margin: 300px auto;
position: relative;
filter: url(#goo);
.text{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
font-family: Anton;
font-size: 200px;
z-index: 999;
color: white;
}
.drop{
height: 30px;
width: 30px;
border-radius: 15px;
background-color: white;
position: absolute;
top: 50%;
left: 50%;
transform: translate($startPosX,$startPosY) scaleX(0.5);
animation: move 6s cubic-bezier(1,.04,.74,.2) infinite;
}
}
@keyframes move{
0%{
transform: translate($startPosX,$startPosY) scaleX(0.2);
height: 60px;
}
30%{
transform: translate($startPosX,-200%);
height: 30px;
}
70%{
transform: translate($startPosX,100%);
height: 30px;
}
100%{
transform: translate($startPosX,800%) scaleX(0.2);
height: 60px;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.