css3 to achieve shock wave effect-CSS Tutorial-php.cn

css3 to achieve shock wave effect

小云云

Release： 2018-01-13 10:00:17

Original

1668 people have browsed it

This article mainly introduces the sample code of CSS3 to achieve shock wave effect. The editor thinks it is quite good. Now I will share it with you and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

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, and the css3 attribute changes involved include width, height, left, top , opacity, first realize the shock wave layer through pseudo-class, and 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 two points), and finally set transition-duration: 0 to achieve instantaneous changes, ps learning You can use a:active to simulate the mouse click effect

Simply draw the following picture (very easy):

Implemented code:

  <html>
  <head>
  <meta charset="UTF-8">
  <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>
  </head>
  <body>
  <!--实现冲击波按钮确定长度-->
  <p class="wave" id="wave1">
  <a>点我</a>
  </p>
  <!--实现冲击波按钮不确定长度时-->
  <p class="wave" id="wave2">
  <a>点我哈哈</a>
  </p>
  </body>
  </html>

Copy after login

Achieved effect:

Related recommendations:

css3 draws a circle Sharing examples of circular loading and turning animation

javascript, html5, css3 custom pop-up windows

Detailed discussion of the animation sequence of css3 animation special effects

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