CSS3 to achieve shock wave effect

This article mainly introduces the CSS3 to realize the shock wave effect of the sample code, small series feel very good, and now share to everyone, but also for everyone to do a reference. Follow the small series together to see it, hope to help everyone.

Recently, many browser button click will appear the following shock wave effect, out of curiosity, referring to the information on the web, the effect of this study to achieve.

Implementation ideas:

Observation of the wave from small to large, involving the CSS3 property changes have width,height,left,top,opacity, first through the pseudo-class implementation of the shock wave layer, and the need to set the center point before and after the shock wave location (here involves a little bit of mathematical knowledge: drawing to calculate the location of two points), Finally set transition-duration:0 realize instantaneous change, PS learning to use a:active can simulate the mouse to achieve the effect of clicking

Simple painting (very dish):

Code to implement:

  
The effect of the implementation: