css3 cliquez pour afficher les effets d'entraînement-tutoriel CSS-php.cn

css3 cliquez pour afficher les effets d'entraînement

php中世界最好的语言

Libérer： 2017-11-24 15:52:12

original

4518 Les gens l'ont consulté

Css3 cliquez pour afficher l'effet spécial des ondulations. Comment utiliser CSS3 pour créer un effet spécial cliquez pour afficher les ondulations ? À quels aspects faut-il prêter attention lorsque l'on clique pour afficher les effets spéciaux des ondulations ? Permettez-moi de vous donner une étude de cas ci-dessous.

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>css3点击出现不同颜色涟漪特效</title>
<meta name="keywords" content=" css3点击出现不同颜色涟漪特效 " />
<meta name="description" content=" css3点击出现不同颜色涟漪特效 " />
      <style>
      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      .ripple{
  position:absolute;
  width:100vmax;
  height:100vmax;
  top:-50vmax;
  left:-50vmax;
  border-radius:50%;
}
body{
  overflow:hidden;
}
.pad{
  position:absolute;
  left:0;
  right:0;
  top:0;
  bottom:0;
}
    </style>
</head>
<body>
  <!-- touch or click -->
<div></div>
      <script src="js/index.js"></script> 
</body>
</html>
Css部分：
.ripple{
  position:absolute;
  width:100vmax;
  height:100vmax;
  top:-50vmax;
  left:-50vmax;
  border-radius:50%;
}
body{
  overflow:hidden;
}
.pad{
  position:absolute;
  left:0;
  right:0;
  top:0;
  bottom:0;
}

Copier après la connexion

Il y a tellement d'effets d'entraînement d'affichage de clics CSS3. Pour un contenu plus passionnant, veuillez prêter attention au site Web chinois php Autres articles connexes !

Lecture connexe :

Comment créer une animation de papillon volant avec CSS3

Comment utiliser Canvas pour réaliser l'interaction entre la balle et la souris

Comment utiliser le canevas pour créer un effet d'animation de fontaine de particules

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!