Maison > Article > interface Web > Comment configurer la souris pour qu'elle zoome et disparaisse après avoir traversé les coins arrondis en CSS3
Comment configurer la souris pour qu'elle zoome et disparaisse après avoir traversé les coins arrondis en CSS3
- WBOYoriginal
- 2022-06-14 16:32:131488parcourir
Méthode : 1. Utilisez le sélecteur ":hover" pour définir le style lorsque la souris passe sur l'élément. La syntaxe est "element:hover{style code}" ; 2. Utilisez "element {animation: name time" ; le code de style lorsque la souris passe dessus. }" pour lier l'animation à l'élément ; 3. Utilisez l'instruction "@keyframes fadenum{100%{border-radius:0;}}" pour définir l'effet d'agrandissement de l'arrondi. coins jusqu'à ce qu'ils disparaissent.
L'environnement d'exploitation de ce tutoriel : système Windows 10, version CSS3&&HTML5, ordinateur Dell G3.
Comment faire disparaître la souris après avoir agrandi le coin arrondi en CSS3
1 Définition du style du sélecteur de pseudo-classe :hover
En css:hover est un sélecteur de pseudo-classe, et le pseudo :hover. Le sélecteur -class est utilisé lorsque la souris se déplace vers l'élément. Ajoute un style spécial à cet élément. Le sélecteur :hover s'applique à tous les éléments.
: Un style spécial ajouté par survol lorsque la souris passe sur un lien.
Dans IE, "" doit être déclaré pour garantir que le sélecteur ":hover" peut être efficace
2 Utiliser l'animation pour lier des animations
L'attribut d'animation est un attribut abrégé, utilisé pour définir. six animations Propriétés :
animation-name
animation-duration
animation-timing-function
animation-delay
-
animation-iteration-count
-
animation-direction
3. Utilisez @keyframes pour définir des animations
Avec les règles @keyframes, vous pouvez créer des animations.
Le principe de la création d'une animation est de changer progressivement un ensemble de styles CSS en un autre ensemble de styles.
Vous pouvez modifier cet ensemble de styles CSS plusieurs fois au cours du processus d'animation.
Spécifiez l'heure à laquelle le changement se produit en pourcentage, ou via les mots-clés "de" et "à", qui sont équivalents à 0% et 100%.
0% est l'heure de début de l'animation, 100% est l'heure de fin de l'animation.
Pour une meilleure prise en charge du navigateur, vous devez toujours définir les sélecteurs 0 % et 100 %.
L'exemple est le suivant :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>123</title>
<style>
div
{
width: 80px;
height: 50px;
background:pink;
border:1px solid #000;
border-radius:50%;
}
div:hover
{
animation:fadenum 5s;
}
@keyframes fadenum{
100%{border-radius:0;}
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>Résultat de sortie :
(Partage vidéo d'apprentissage : tutoriel vidéo CSS, tutoriel vidéo HTML)
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!