Maison > Article > interface Web > Secouez les boutons au survol en utilisant HTML et CSS

Secouez les boutons au survol en utilisant HTML et CSS

WBOYavant: 2023-09-11 19:41:02671parcourir

Dans ce tutoriel, nous apprendrons à utiliser HTML et CSS pour secouer un bouton au survol de l'utilisateur. La création d'un bouton de secousse peut rendre l'expérience utilisateur de votre application plus attrayante.

Nous devons créer une animation personnalisée en utilisant les règles CSS "keyframe" pour secouer n'importe quel élément HTML. Nous pouvons ensuite utiliser des images clés personnalisées comme valeur de la propriété CSS "animation" pour secouer le bouton lorsque l'utilisateur le survole.

Grammaire

Les utilisateurs peuvent secouer le bouton de survol en utilisant HTML et CSS en suivant la syntaxe suivante.

.btn:hover {
   animation: key_frame_name animation_time repetition;
}
@keyframes key_frame_name {
   0% {
      transform: rotate(0deg);
   }
   100% {
      transform: rotate(10deg);
   }
}

Dans la syntaxe ci-dessus, nous avons créé une règle CSS personnalisée pour ajouter une animation de tremblement au bouton. Les utilisateurs peuvent remplacer « animation_time » par une unité de temps et « répétition » par un nombre pour répéter l'animation.

La traduction chinoise de

Exemple

est :

Exemple

Dans l'exemple ci-dessous, on secoue le bouton verticalement. Nous avons créé un bouton HTML normal en utilisant la balise "button" et lui avons donné un nom de classe "btn". Nous utilisons le nom de la classe pour accéder au bouton et le styliser.

En CSS, nous utilisons la propriété "animation" pour ajouter une image clé "shake" au bouton lorsque l'utilisateur le survole. Dans l'image clé Shake, nous faisons pivoter le bouton "0 degrés" à 0% du temps d'animation, "5 degrés" à 20% du temps, "0 degrés" à 50% du temps et "0 degrés" à 50 % du temps d'animation. Bouton de rotation du temps « 5 degrés » 70 % du temps est « 0 degré » et 100 % du temps est « 0 degré ».

Dans la sortie, l'utilisateur peut observer le bouton trembler dans le sens vertical.

<html>
   <style>
      .btn {
         justify-content: center;
         align-items: center;
         height: fit-content;
         padding: 10px 20px;
         border: 1px solid #000;
         border-radius: 5px;
         background-color: red;
         color: white;
         font-size: 40px;
      }
      .btn:hover {animation: shaking 0.5s infinite;}
      @keyframes shaking {
         0% {transform: rotate(0deg);}
         20% {transform: rotate(-4deg);}
         50% {transform: rotate(0deg);}
         70% {transform: rotate(4deg);}
         100% {transform: rotate(0deg);}
      }
   </style>
   <body>
      <h2> Shaking the button vertically using HTML and CSS </h2>
      <p> Please hover the cursor over the button below to see the shaking effect.</p>
      <div>
         <button class = "btn"> Submit </button>
      </div>
   </body>
</html>

La traduction chinoise de

Exemple

est :

Exemple

Dans l'exemple ci-dessous, nous utilisons HTML et CSS pour secouer le bouton horizontalement.

Nous avons utilisé la propriété CSS « transform : translateX() » pour secouer le bouton horizontalement. Tout d’abord, nous déplaçons le bouton dans le sens négatif. Ensuite, nous déplaçons le bouton vers sa position d'origine. Ensuite, nous déplaçons le bouton dans le sens positif, et enfin, nous utilisons la règle 'keyframes' de CSS pour déplacer le bouton vers sa position d'origine.

<html>
   <style>
      .btn {
         justify-content: center;
         align-items: center;
         height: fit-content;
         padding: 10px 20px;
         border: 1px solid #000;
         border-radius: 5px;
         background-color: black;
         color: white;
         font-size: 40px;
      }
      .btn:hover {animation: shaking 0.4s infinite;}
      @keyframes shaking {
         0% {transform: translateX(-10px);}
         20% {transform: translateX(-5px);}
         50% {transform: translateX(-5px);}
         70% {transform: translateX(-5px);}
         80% {transform: translateX(10px);}
         90% {transform: translateX(-10px);}
      }
   </style>
   <body>
      <h2> Shaking the button Horizontally using HTML and CSS </h2>
      <p> Please hover the cursor over the button below to see the shaking effect.</p>
      <div>
         <button class = "btn"> Hover the Button </button>
      </div>
   </body>
</html>

La traduction chinoise de

Exemple

est :

Exemple

Dans l'exemple ci-dessous, nous apprendrons comment secouer le bouton horizontalement et verticalement. Nous utilisons « translateX() » avec « rotate() » comme valeur de la propriété CSS « transform ».

« translateX() » déplace le bouton horizontalement et la fonction « rotate() » déplace le bouton verticalement. Dans le résultat, l'utilisateur peut observer que lorsqu'il survole le bouton, celui-ci se déplace légèrement horizontalement et verticalement. Cependant, l'utilisateur peut augmenter la valeur du paramètre de la fonction « translateX() » pour tramer davantage dans le sens horizontal.

<html>
   <style>
      .btn {
         justify-content: center;
         align-items: center;
         height: fit-content;
         padding: 10px 20px;
         border: 1px solid #000;
         border-radius: 5px;
         background-color: green;
         color: white;
         font-size: 25px;
      }
      .btn:hover {animation: shaking 0.4s infinite;}
      @keyframes shaking {
         0% {transform: translateX(0) rotate(0deg);}
         25% {transform: translateX(15px) rotate(5deg);}
         50% {transform: translateX(0px) rotate(0deg);}
         75% {transform: translateX(-15px) rotate(-5deg);}
         100% {transform: translateX(0px) rotate(0deg);}
      }
   </style>
   <body>
   <h3> Shaking the button Horizontally and vartically using HTML and CSS</h3>
   <div>
      <button class = "btn"> Point out the Button </button>
   </div>
</body>
</html>

Conclusion

Dans ce tutoriel, l'utilisateur a appris à jitter un bouton HTML en utilisant uniquement CSS. Dans le premier exemple, nous avons appris à secouer un bouton verticalement. Dans le deuxième exemple, nous avons appris à secouer le bouton horizontalement ; dans le dernier exemple, nous avons appris à secouer le bouton horizontalement et verticalement.

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!

css html transform animation

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Comment changer la hauteur de la balise br ?Article suivant：Comment changer la hauteur de la balise br ?

Articles Liés

Voir plus