Jon Snow
2023-10-08T10:30:00Z
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Water Drop</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="drop"></div>
/* Visit https://democoding.in/ for more free css animation */
</body>
</html>
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #e8e8e8;
overflow: hidden;
}
.drop {
position: absolute;
width: 150px;
height: 150px;
top: 30%;
left: 35%;
background: transparent;
border-radius: 57% 43% 37% 63% / 45% 52% 48% 52%;
box-shadow: inset 10px 10px 10px rgba(0, 0, 0, 0.05), 15px 25px 10px rgba(0, 0, 0, 0.1),
15px 20px 20px rgba(0, 0, 0, 0.05), inset -10px -10px 15px rgba(237, 237, 237, 0.9);
animation: anim 1s infinite alternate;
}
.drop:before {
content: "";
position: absolute;
left: 25px;
top: 35px;
width: 20px;
height: 20px;
border-radius: 42% 58% 37% 63% / 40% 43% 57% 60%;
background: #fff;
}
/* Visit https://democoding.in/ for more free css animation */
.drop:after {
content: "";
position: absolute;
left: 60px;
top: 25px;
width: 10px;
height: 10px;
border-radius: 42% 58% 37% 63% / 40% 43% 57% 60%;
background: #ffffff;
}
@keyframes anim {
0% {
transform: translateY(0);
height: 150px;
width: 150px;
}
100% {
transform: translateY(40px);
height: 135px;
width: 160px;
}
}
