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

Comment utiliser CSS3 pour obtenir un effet d'onde de choc

php中世界最好的语言

Libérer： 2018-03-20 14:24:15

original

1501 Les gens l'ont consulté

Cette fois, je vais vous apporter CSS3 pour obtenir l'effet d'onde de choc. Quelles sont les précautions pour réaliser l'effet d'onde de choc avec CSS3. Ce qui suit est un cas pratique, jetons un coup d'œil.

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. Les changements d'attributs CSS3 impliqués incluent la largeur, la hauteur, la gauche, le haut et l'opacité. l'onde de choc est implémentée via une couche de pseudo-classes. 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 des deux points. ). Enfin, définissez la durée de transition : 0 pour obtenir des changements instantanés. PS a appris que vous pouvez utiliser a:active pour simuler le clic de la souris

Dessinez simplement l'image ci-dessous (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

L'effet obtenu :

code github : Implémentez le code d'onde de choc

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP !

Lecture recommandée :

Comment utiliser CSS pour définir et enregistrer les mots de passe des utilisateurs

Configurer le style de la barre de défilement H5

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!