CSS3 pour obtenir un effet d'onde de choc-tutoriel CSS-php.cn

CSS3 pour obtenir un effet d'onde de choc

小云云

Libérer： 2018-01-13 10:00:17

original

1648 Les gens l'ont consulté

Cet article présente principalement l'exemple de code CSS3 pour obtenir un effet d'onde de choc. L'éditeur pense que c'est plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.

Récemment, l'effet d'onde de choc suivant apparaîtra lorsque vous cliquerez sur de nombreux boutons du navigateur. Par curiosité, j'ai étudié et implémenté cet effet en me référant aux informations sur Internet.

Idée d'implémentation :

Observez que la vague passe de petite à grande et que les changements d'attributs CSS3 impliqués incluent la largeur, la hauteur , à gauche, en haut, opacité, réalisez d'abord la couche d'onde de choc via une pseudo-classe, et en même temps, vous devez définir la position du point central avant et après l'onde de choc (un peu de connaissances mathématiques sont impliquées ici : dessinez une image pour calculer la position de deux points), et enfin définir la durée de transition : 0 pour obtenir des changements instantanés, ps learning Vous pouvez utiliser a:active pour simuler l'effet du clic de la souris

Dessinez simplement l'image suivante (très simple ) :

Le code implémenté :

  <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>

Copier après la connexion

Effet obtenu :