This is the demo of the Water Ripple Effect or water drop animation here we created this water ripple effect animation using HTML, CSS and JavaScript and we also used an audio file for the water drop sound, after reload this page of the water drop animation you click anywhere on the screen you will get water drop sound when water drop touched the surface of the water.
Create How to Create Water Ripple Effect or Water Drop Animation
Learn How To Create How to Create Water Ripple Effect or Water Drop Animation Using HTML, CSS and JavaScript Step By Step.
Use these source code for creating water ripple effect or water drop animation.
<!DOCTYPE html>
<html>
<head>
<title>Water Drop Animation</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-color: black;
/*background-image: url('https://weblink8.com/wp-content/uploads/2023/05/blue-ocean.jpg');*/
background-size: cover;
background-repeat: no-repeat;
}
.waterdrop{
width: 10px;
height: 10px;
background-color: #03a9f4;
border-radius: 50%;
position: absolute;
top: 0;
left: 50%;
animation: 2000ms waterdrop cubic-bezier(0.4, 0, 1, 1) infinite;
}
.box{
width: 100%;
min-height: 100vh;
position: relative;
top: 0;
left: 0;
right: 0;
bottom: 0;
justify-content: center;
align-items: center;
display: flex;
flex-wrap: nowrap;
transform-style: preserve-3d;
transform: rotateX(80deg);
}
.box .wave{
width: 100px;
height: 100px;
border: 5px solid #03a9f4;
border-radius: 50%;
position: absolute;
box-shadow: inset 0px 0px 10px 4px #165e8b;
}
.box .wave:nth-child(1){
transform: scale(1);
transition: 2s;
animation: 2s wave1 linear infinite;
}
.box .wave:nth-child(2){
transform: scale(2);
transition: 2s;
animation: 2s wave2 linear infinite;
}
.box .wave:nth-child(3){
transform: scale(3);
transition: 2s;
animation: 2s wave3 linear infinite;
}
.box .wave:nth-child(4){
transform: scale(4);
transition: 2s;
animation: 2s wave4 linear infinite;
}
.box .wave:nth-child(5){
transform: scale(5);
transition: 2s;
animation: 2s wave5 linear infinite;
}
@keyframes wave1{
from{
transform: scale(0);
}
to{
transform: scale(1);
}
}
@keyframes wave2{
from{
transform: scale(1);
}
to{
transform: scale(2);
}
}
@keyframes wave3{
from{
transform: scale(2);
}
to{
transform: scale(3);
}
}
@keyframes wave4{
from{
transform: scale(3);
}
to{
transform: scale(4);
}
}
@keyframes wave5{
from{
transform: scale(4);
}
to{
transform: scale(5);
opacity: 0;
}
}
@keyframes waterdrop{
from{
top: 0;
}
to{
top: 50%;
}
}
</style>
</head>
<body>
<div class="box">
<div class="wave"></div>
<div class="wave"></div>
<div class="wave"></div>
<div class="wave"></div>
<div class="wave"></div>
</div>
<div class="waterdrop"></div>
<script>
setInterval(function(){
var audio = new Audio('https://weblink8.com/wp-content/uploads/2023/05/Drop.mp3');
audio.play();
}, 2000);
</script>
</body>
</html>Water Drop Sound :-
Background Image for Water Drop Animation:-
