CSS3 water Ripples animation positioning style production tutorial

First up Effect chart:

Tutorial

The main properties that this animation needs to use: animation, Transition, and keyframes properties.

Step 1:html Code:

Step 2:css Style: Setting animation properties

. dot:before{

Content: ';

Position:absolute;

Z-index:2;

left:0;

top:0;

width:10px;

height:10px;

Background-color: #ff4200;

border-radius:50%;

}

. dot:after {

Content: ';

Position: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 animated name defined in front of us keyframes.

-webkit-animation-duration:1s;/* Animation Duration * *

-webkit-animation-timing-function:ease; /* Animation frequency, and transition-timing-function is the same * *

-webkit-animation-delay:0s;/* Animation Delay Time * *

-webkit-animation-iteration-count:infinite;/* definition of circular data, infinite for unlimited times * *

-webkit-animation-direction:normal;/* Definition Animation Mode * *

}

Set animation mode, like a wave, from small to big change, so we have to set the width of the 0–50px, transparency from there to nothing, so you can realize the ripple effect of ripples.

@keyframes Ripple {

0% {

left:5px;

top:5px;

opcity:75;

width:0;

height:0;

}

100% {

left:-20px;

top:-20px;

opacity:0;

width:50px;

height:50px;

}

}

The effect is completed, this case is more suitable for image positioning identification, of course, there can be a better alternative to improve the style and animation effect.