<div class="water"></div>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: deepskyblue;
}
.water {
position: relative;
width: 200px;
height: 200px;
box-shadow: 10px 15px 20px rgba(0, 0, 0, 0.3),
15px 20px 30px rgba(0, 0, 0, 0.1), inset 15px 20px 25px rgba(0, 0, 0, 0.5), inset -15px -20px 25px rgba(225, 225, 225, 0.5);
border-radius: 31% 69% 57% 43%/46% 26% 74% 54%;
animation: action 10s linear infinite;
&::after {
content: "";
position: absolute;
height: 10px;
width: 10px;
top: 60px;
left: 60px;
background-color: rgba(225, 225, 225, 0.8);
border-radius: 63% 37% 70% 30% / 52% 60% 40% 48%;
box-shadow: 0px 0px 6px 6px rgba(225, 225, 225, 0.8);
}
}
@keyframes action {
25% {
border-radius: 46% 54% 65% 35% / 32% 44% 56% 68%;
}
50% {
border-radius: 55% 45% 49% 51% / 50% 28% 72% 50%;
}
75% {
border-radius: 42% 58% 39% 61% / 35% 45% 55% 65%;
}
100% {
border-radius: 52% 48% 57% 43% / 56% 48% 52% 44%;
}
}