How to use CSS3 to achieve shock wave effect

This time to everyone to bring CSS3 to achieve the effect of shock wave, CSS3 to achieve the effect of the impact of the attention of the matter, the following is the actual case, to see together.

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:


GitHub code: Implementing the Shockwave Code

Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!

Recommended reading:

How to use CSS settings to record user passwords

Configure the scrollbar style for H5