Maison > Article > interface Web > css3 cliquez pour afficher les effets d'entraînement

css3 cliquez pour afficher les effets d'entraînement

php中世界最好的语言original: 2017-11-24 15:52:124511parcourir

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

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment créer une animation de vol de papillon avec CSS3Article suivant：Comment créer une animation de vol de papillon avec CSS3

Articles Liés

Voir plus