Maison >interface Web >tutoriel CSS >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:124589parcourir
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!