<!DOCTYPE html>
<html>
<head>
<title>water drop</title>
<style>
body {
overflow: hidden;
background: rgb(25,35,125);
}
div.drop-container {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
height: 200px;
width: 200px;
}
div.drop {
position: absolute;
top: -125%;
width: 100%;
height: 100%;
border-radius: 100% 5% 100% 100%;
transform: rotate(-45deg);
margin: 0px;
background: deepskyblue;
animation: drip 4s forwards infinite;
}
h1 {
color: white;
position: absolute;
font-size: 2.5em;
height: 1em;
top: 90%; left: 40%; right: 0; bottom: 10%;
z-index: 2;
margin: auto;
opacity: 0;
animation: appear 3s 2.5s infinite;
}
@keyframes appear {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
div.drop-container:before,
div.drop-container:after {
content: '';
position: absolute;
z-index: -1;
top: 55%;
right: 50%;
transform: translate(50%) rotateX(75deg);
border-radius: 100%;
opacity: 0;
width: 75%;
height: 75%;
border: 5px solid skyblue;
animation: dripple 2s infinite ease-out 1s;
}
div.drop-container:after {
animation: dripple 2s ease-out 1.7s;
}
@keyframes drip {
45% {
top: 0;
border-radius: 100% 5% 100% 100%;
transform: rotate(-45deg);
}
100% {
top: 0;
transform: rotate(0deg);
border-radius: 100%;
}
}
@keyframes dripple {
0% {
width: 150px;
height: 150px;
}
25% {
opacity: 1;
}
100% {
width: 700px;
height: 500px;
top: -20%;
opacity: 0;
}
}
</style>
</head>
<body>
<h1>WATER DROP</h1>
<div class="drop-container">
<div class="drop"></div>
</div>
</body>
</html>
0 Comments