How to use css3 to achieve shock wave effect

This time I will bring you css3 to achieve the shock wave effect. What are the precautions to achieve the shock wave effect with css3? The following is a practical case, let’s take a look.

Recently, the following shock wave effect will appear when clicking many browser buttons. Out of curiosity, I studied and implemented this effect by referring to the information on the Internet.

Implementation ideas:

Observe that the wave changes from small to large. The css3 attribute changes involved include width, height, left, top, and opacity. First, implement the shock wave through pseudo-classes layer. At the same time, you need to set the center point position before and after the shock wave (a little mathematical knowledge is involved here: draw a picture to calculate the position of the two points). Finally, set the transition-duration: 0 to achieve instantaneous changes. PS learned that you can use a:active to simulate the mouse. The effect of clicking

Simply draw the picture below (very easy):

Code implemented:

  
  
  <meta>
  <title>实现冲击波--数学知识很重要</title>
  <style>
  *{
  margin:0;
  padding:0;
  box-sizing:border-box;
  }
  html,body{
  font-family:"微软雅黑";
  }
  .wave{
  position:relative;
  float:left;
  width:50%;
  height:420px;
  }
  .wave a{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  display:inline-block;
  width:120px;
  height:50px;
  /*margin-left:-60px;
  margin-top:-25px;*/
  line-height:50px;
  text-align:center;
  border-radius:5px;
  color:#fff;
  font-size:16px;
  cursor:pointer;
  /*overflow:hidden;*/
  
  }
  #wave1{
  background-color:#00BFFF;
  }
  #wave2{
  background-color:#009955;
  }
  #wave1 a{
  background-color:burlywood;
  }
  #wave2 a{/*宽度不确定长度*/
  width:50%;
  height:50px;
  background-color:cadetblue;
  }
  .wave a:after{
  /*画图
 ，假设left:0;top:0然后画出两个中心点的水平和垂直距离*/
  content: "";
  display: block;
  position: absolute;
  left: -40px;
  top: -75px;
  width: 200px;
  height: 200px;
  background: rgba(255,255,255,0.8);
  border-radius: 50%;
  opacity:0;
  transition: all 1s;
  }
  .wave a:active:after{
  /*位于中间即是a的中点*/
  width: 0; 
  height: 0; 
  left:60px; 
  top: 25px;
  opacity: 1; 
  transition-duration: 0s;
  }
  
  #wave2 a:after{
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  }
  #wave2 a:active:after{
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  }
  </style>
  
  
  <!--实现冲击波按钮确定长度-->
  <p>
  <a>点我</a>
  </p>
  <!--实现冲击波按钮不确定长度时-->
  <p>
  <a>点我哈哈</a>
  </p>
  
  

Effect achieved:

github code: Implement shock wave code

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

How to use CSS to set and record user passwords

Configuring H5 scroll bar style

The above is the detailed content of How to use css3 to achieve shock wave effect. For more information, please follow other related articles on the PHP Chinese website!