LabEx
EntrerRejoindre

Animation de boîte à ombre au survol

Beginner

This tutorial is from open-source community. Access the source code

Introduction

Dans ce laboratoire, nous allons explorer divers concepts et techniques CSS pour améliorer l'apparence visuelle des pages web. Par des exercices pratiques, nous apprendrons à créer et modifier des règles CSS, à appliquer des styles à des éléments HTML et à utiliser des sélecteurs CSS pour cibler des éléments spécifiques. À la fin du laboratoire, vous aurez une compréhension solide de la manière d'utiliser CSS pour créer des pages web attrayantes visuellement et réactives.

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 boîte à ombre au survol

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

Pour créer une boîte à ombre autour du texte lorsqu'il est survolé, suivez ces étapes :

  1. Définissez transform: perspective(1px) pour donner à l'élément un espace 3D en affectant la distance entre le plan Z et l'utilisateur, et translateZ(0) pour repositioner l'élément p le long de l'axe z dans l'espace 3D.
  2. Utilisez box-shadow pour rendre la boîte transparente.
  3. Activez les transitions pour box-shadow et transform en utilisant la propriété transition-property.
  4. Appliquez une nouvelle box-shadow et transform: scale(1.2) pour modifier l'échelle du texte en utilisant les sélecteurs pseudo-classes :hover, :active et :focus.
  5. Ajoutez la classe hover-shadow-box-animation à l'élément p.

Voici le code HTML :

<p class="hover-shadow-box-animation">Box it!</p>

Et voici le code CSS :

.hover-shadow-box-animation {
  display: inline-block;
  vertical-align: middle;
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  margin: 10px;
  transition:
    box-shadow 0.3s,
    transform 0.3s;
}

.hover-shadow-box-animation:hover,
.hover-shadow-box-animation:focus,
.hover-shadow-box-animation:active {
  box-shadow: 1px 10px 10px -10px rgba(0, 0, 24, 0.5);
  transform: scale(1.2);
}

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

Sommaire

Félicitations ! Vous avez terminé le laboratoire Animation de boîte à ombre au survol. Vous pouvez pratiquer d'autres laboratoires dans LabEx pour améliorer vos compétences.