*{
margin: 0;
padding: 0;
}
body{
background-color: black;
}
.drop{
position: fixed;
top: 0; left: 50px;
width: 100px; height: 100vh;
color: blue;
overflow: hidden;
}
.drop:before{
content: '';
position: absolute;
top: 10px; left: 50%;
width: 80px; height: 80px;
border-radius: 100%;
background-color: currentColor;
transform: translateX(-50%) rotate(45deg);
animation: surface_tension1 1.5s linear infinite;
}
.drop:after{
content: '';
position: absolute;
top: 30px; left: 50%;
width: 30px; height: 30px;
border-radius: 100%;
background-color: currentColor;
transform: translateX(-50%) rotate(45deg);
animation:
drop 1.5s ease-in infinite,
surface_tension2 1.5s ease-in infinite;
}
@keyframes drop{
00%{ transform: translateX(-50%) translateY(0) scale(1.5,1.5) rotate(45deg); }
50%{ transform: translateX(-50%) translateY(50px) scale(0.8,1.3) rotate(45deg); }
80%,100%{ transform: translateX(-50%) translateY(100vh) scale(1.0,1.0) rotate(45deg); }
}
@keyframes surface_tension1{
00%{
border-radius: 100% 100% 100% 100%;
transform: translateX(-50%) scale(1,1) rotate(45deg);
}
55%{
border-radius: 100% 100% 50% 100%;
transform: translateX(-50%) scale(0.98,1.02) rotate(45deg);
}
85%{
border-radius: 100% 100% 100% 100%;
transform: translateX(-50%) scale(1,1) rotate(45deg);
}
}
@keyframes surface_tension2{
00%{ border-radius: 10% 80% 100% 80%;}
60%{ border-radius: 10% 80% 100% 80%;}
75%{ border-radius: 100% 100% 100% 100%;}
}
#code{
position: absolute;
top: 0; left: 0;
width: 100%; height: auto;
padding: 20px;
box-sizing: border-box;
font-size: 0.9em;
white-space: pre-wrap;
word-break: break-all;
color: rgba(100,150,210,.85);
}