Maison > Article > interface Web > Comment obtenir un effet d'animation d'arrêt de survol de la souris en CSS3
Comment obtenir un effet d'animation d'arrêt de survol de la souris en CSS3
- WBOYoriginal
- 2021-12-10 09:54:538333parcourir
En CSS, vous pouvez utiliser le sélecteur ":hover" et l'attribut "animation-play-state" pour obtenir l'effet d'animation d'arrêt du survol de la souris. La syntaxe est "animation element:hover{animation-play-state:paused; }".
L'environnement d'exploitation de ce tutoriel : système Windows 10, version CSS3&&HTML5, ordinateur Dell G3.
Comment implémenter l'effet d'animation d'arrêt du survol de la souris en CSS3
En CSS, vous pouvez utiliser l'attribut d'animation pour lier l'animation aux éléments, puis utiliser les règles @keyframes pour définir l'opération d'animation.
Lorsque nous jouons une animation, si nous voulons mettre l'animation en pause, nous devons utiliser l'attribut animation-play-state. L'attribut animation-play-state a deux valeurs : paused : met l'animation en pause ; running : continue la lecture de l'animation
Nous pouvons mettre l'animation en pause en sélectionnant l'état lorsque la souris survole l'élément via le sélecteur de survol ;
Regardons un exemple. L'exemple est le suivant :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
width:100px;
height:100px;
background-color:pink;
animation:fadenum 5s infinite;
}
@keyframes fadenum{
100%{transform:rotate(360deg);}
}
div:hover{
animation-play-state:paused;
}
</style>
</head>
<body>
<div></div>
</body>
</html>Résultat de sortie :
Si vous êtes intéressé, vous pouvez continuer à visiter : tutoriel vidéo CSS.
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!