Maison > Article > interface Web > Exemple d'animation CSS3 de clic pour agrandir
Exemple d'animation CSS3 de clic pour agrandir
- php中世界最好的语言original
- 2018-03-22 09:56:024741parcourir
Cette fois, je vais vous présenter un exemple d'animation utilisant CSS3 pour implémenter une animation cliquer pour zoomer. Quelles sont les précautions pour implémenter un exemple d'animation cliquer pour zoomer à l'aide de CSS3. un cas pratique, jetons un coup d'oeil.
Avant-propos
J'ai récemment rencontré un besoin au travail. L'effet obtenu est que lorsque l'on appuie sur le bouton de collecte en haut à droite du produit. Lorsque l'on clique sur l'image, l'animation de zoom est déclenchée. Plus tard, après avoir recherché des informations pertinentes, j'ai découvert que cet effet pouvait être obtenu en utilisant l'animation css3:@keyframes.
Focus technique css3 : animation @keyframes
Exemple de code
<!DOCTYPE html>
<head>
<style type="text/css">
@keyframes myfirst {
0% {
width: 50px;
height: 50px;
top: 10px;
right: 10px;
}
75% {
width: 60px;
height: 60px;
top: 5px;
right: 5px;
}
100% {
width: 50px;
height: 50px;
top: 10px;
right: 10px;
}
}
.warp {
width: 400px;
height: 300px;
position: relative;
background: #ccc;
}
.btn {
position: absolute;
width: 50px;
height: 50px;
border:solid 3px #cc3c24;
top: 10px;
right: 10px;
border-radius: 8px;
cursor: pointer;
}
.btn.cur{
animation: myfirst 0.2s;
}
.btn.yes{
background: #cc3c24;
}
</style>
</head>
<body>
<p class="warp">
<p class="btn"></p>
</p>
<script src="http://liuxiaofan.com/demo/js/jquery-2.1.4.min.js"></script>
<script>
var btn = $('.btn');
btn.click(function () {
if( $(this).is('.yes')){
$(this).removeClass('yes');
$(this).removeClass('cur');
}else{
$(this).addClass('yes');
$(this).addClass('cur');
}
});
btn.on('webkitAnimationEnd', function () {
$(this).removeClass('cur');
});
</script>
</body>
</html>
Le rendu est le suivant :
Je pense que vous maîtrisez la méthode après avoir lu le cas présenté dans cet article. Pour des informations plus intéressantes, veuillez payer. attention aux autres articles connexes sur le site PHP chinois !
Lecture recommandée :
CSS propose plusieurs façons d'implémenter une disposition à trois colonnes
CSS implémente un processus de flèche avec article de progrès visible
Utilisation de HTML+CSS pour implémenter le menu déroulant
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!