<br>
<b>CSS Only Liquid Dripping Effect</b>
<br>
Can be used as a background and multiple layers of liquid can be created.
<br>
<div class="container">
<div class="blobs">
<div class="liquid"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
</div>
<h1 class="text">LIQUID<br>DRIP</h1>
</div>
<div class=""></div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="0">
<defs>
<filter id="goog">
<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result="goo" />
<feBlend in="SourceGraphic" in2="goo" />
</filter>
<filter id="goo">
<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result="goo" />
<feBlend in="SourceGraphic" in2="goo"/>
</filter>
</defs>
</svg>
@import url('https://fonts.googleapis.com/css?family=Raleway:300,700,900');
@mixin leftPos($count){
@for $i from 1 through $count {
&:nth-child(#{$i}) {
left:((($i)-2)*13)-1%;
}
}
}
/////////////////////////////////////
body{
background:#5444c4;
color:#FFF;
margin:0;
font-family: 'Raleway', sans-serif;
text-align:center;
letter-spacing:0.08em;
}
b{
font-size:28px;
color:#FFF;
}
.container{
width:300px;
height:500px;
margin:15px auto;
background:#6cd2ff;
overflow:hidden;
position:relative;
box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}
.text{
position:absolute;
left:50%;
top:45%;
transform:translate(-50%,-50%);
text-align:center;
color:#6cd2ff;
font-size:64px;
font-weight:900;
}
.liquid{
width:120%;
height:10px;
position:absolute;
top:-2%;
left:-10%;
background:#FFF;
border-radius:10%;
animation: liquid 5s infinite;
}
.blobs{
filter:url('#goo');
width:100%;
height:100%;
position:relative;
.blob{
width:30px;
height:30px;
margin:0 5px 0px 0;
background:#FFF;
border-radius:50%;
position:absolute;
top:0;
@include leftPos(9);
animation: drip_one 5s infinite;
&:nth-of-type(4n-7){
width:65px;
animation: drip_four 5s infinite;
}
&:nth-of-type(3n-2){
width:26px;
}
&:nth-of-type(2){
width:22px;
}
&:nth-of-type(8){
animation: drip_five 5s infinite;
}
&:nth-of-type(4n+2){
height:56px;
animation: drip_two 5s infinite;
}
&:nth-of-type(6n-2){
height:42px;
animation: drip_three 5s infinite;
}
}
}
@keyframes drip_one{
from{top:0;}
to{top:103%;}
}
@keyframes drip_two{
from{top:0;}
to{top:104%;}
}
@keyframes drip_three{
from{top:0;height:52px;}
to{top:102%;height:132px;}
}
@keyframes drip_four{
from{top:0;width:65px;height:30px;}
to{top:102%;width:75px;height:45px;}
}
@keyframes drip_five{
from{top:0;height:30px;}
to{top:102%;height:72px;}
}
@keyframes liquid{
from{height:15px;}
to{height:109%;}
}
View Compiled
//Inspiration from Cuberto https://dribbble.com/shots/3206606-Landing-page-wip
//Thanks Cuberto for this amazing concept.
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.