Tutoriel sur l'animation de rétrécissement de bouton

Introduction

Dans ce laboratoire, nous allons explorer la manière de créer une animation de rétrécissement de bouton à l'aide de CSS. Le but de ce laboratoire est de vous aider à comprendre comment utiliser la pseudo-classe :hover et la propriété transition pour créer une animation fluide et visuellement attrayante lorsque l'utilisateur survole un bouton. À la fin de ce laboratoire, vous aurez une bonne compréhension de la manière de créer des animations simples mais efficaces à l'aide de CSS.

Ceci est un Guided Lab, qui fournit des instructions étape par étape pour vous aider à apprendre et à pratiquer. Suivez attentivement les instructions pour compléter chaque étape et acquérir une expérience pratique. Les données historiques montrent que c'est un laboratoire de niveau débutant avec un taux de réussite de 92%. Il a reçu un taux d'avis positifs de 100% de la part des apprenants.

Animation de rétrécissement de bouton

index.html et style.css ont déjà été fournis dans la machine virtuelle.

Pour créer une animation de rétrécissement au survol d'un élément, vous pouvez utiliser une propriété transition appropriée pour animer les changements et la pseudo-classe :hover pour déclencher l'animation. Par exemple, si vous voulez rétrécir un bouton avec la classe button-shrink lorsque l'utilisateur le survole, vous pouvez ajouter le CSS suivant :

.button-shrink {
  color: #65b5f6;
  background-color: transparent;
  border: 1px solid #65b5f6;
  border-radius: 4px;
  padding: 0 16px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.button-shrink:hover {
  transform: scale(0.8);
}

Cela appliquera un effet de transition à toutes les propriétés du bouton lorsqu'il y a un changement, et lorsque l'utilisateur le survole, le bouton se rétrécira à 80 % de sa taille d'origine. Le code HTML pour le bouton est le suivant :

<button class="button-shrink">Submit</button>

Veuillez cliquer sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez rafraîchir l'onglet Web 8080 pour prévisualiser la page web.

Sommaire

Félicitations ! Vous avez terminé le laboratoire Animation de rétrécissement de bouton. Vous pouvez pratiquer d'autres laboratoires dans LabEx pour améliorer vos compétences.