Comment configurer la souris pour qu'elle zoome et disparaisse après avoir traversé les coins arrondis en CSS3-Questions et réponses frontales-php.cn

Comment configurer la souris pour qu'elle zoome et disparaisse après avoir traversé les coins arrondis en CSS3

WBOY

Libérer： 2022-06-14 16:32:13

original

1591 Les gens l'ont consulté

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.

Comment configurer la souris pour qu'elle zoome et disparaisse après avoir traversé les coins arrondis en CSS3

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>

Copier après la connexion

Résultat de sortie :

Comment configurer la souris pour quelle zoome et disparaisse après avoir traversé les coins arrondis en CSS3