CSS for water ripple effect

1. HTML Code:

<div class= "Example" ><div class= "dot" ></div></div>

2. CSS style: Set animation property

. Dot:before{content: ';p osition:absolute;z-index:2;left:0;top:0;width:10px;height:10px;background-color: # ff4200;border-radius:50%;}. Dot:after {content: ';p osition:absolute;z-index:1;width:10px;height:10px;background-color: #ff4200; Border-radius : 50%;box-shadow:0 0 10px Rgba (0,0,0,.3) inset;-webkit-animation-name: ' Ripple ';/* animated property name, which is the animation name KeyFrames defined earlier */- webkit-animation-duration:1s;/* animation duration */-webkit-animation-timing-function:ease; /* Animation frequency, and Transition-timing-function is the same as the */-webkit-animation-delay:0s;/* animation delay time */-webkit-animation-iteration-count : infinite;/* defines looping data, infinite defines animation for infinite */-webkit-animation-direction:normal;/* */}

3. Set the animation mode, like a wave, from small to big change, so we want to set wide height from 0–50px, transparency from there to none, so that can achieve the ripple effect of water waves.

@keyframes Ripple {0% {left:5px;top:5px;opcity:75;width:0;height:0;} 100% {left:-20px;top:-20px;opacity:0;width:50px;height:50px;}}

Effect:

Reference Link: http://www.shejidaren.com/css3-ripple-dot.html

CSS for water ripple effect