Conseils et méthodes pour utiliser CSS pour obtenir des effets d'ombre au survol de la souris

Conseils et méthodes pour utiliser CSS pour implémenter des effets d'ombre lorsque la souris survole. Des exemples de code spécifiques sont requis

Dans la conception Web, l'effet de survol de la souris est l'une des méthodes d'interaction courantes. En faisant en sorte que les éléments affichent des effets spécifiques au survol de la souris, vous pouvez augmenter l'expérience utilisateur et l'attractivité de votre site Web. Parmi eux, utiliser CSS pour implémenter des effets d’ombre lorsque la souris survole est une méthode courante et simple. Cet article présentera comment implémenter cette technique et donnera des exemples de code spécifiques.

1. Effet d'ombre simple
Tout d'abord, nous devons utiliser CSS pour définir un style de base, puis ajouter des effets d'ombre supplémentaires lorsque la souris survole. Voici un exemple de code pour implémenter un effet d'ombre simple :

HTML :

Ombre au survol de la souris

CSS :
.box {
width : 200px;
height : 200px;
couleur d'arrière-plan : #f1f1f1;
transition : box-shadow 0.3s;
}

.box:hover {
box-shadow : 0 0 10px rgba(0, 0, 0, 0.5);
}

Description du code :

• Partie HTML, nous utilisons un élément div avec la classe "box" comme exemple.
• Dans la partie CSS, nous définissons la largeur, la hauteur et la couleur d'arrière-plan de l'élément div, et utilisons l'attribut transition pour définir l'effet de transition.
• Lorsque l'élément div est en survol de la souris, nous utilisons le sélecteur :hover pour ajouter l'attribut box-shadow afin d'obtenir l'effet d'ombre.

2. Effet d'ombre multicouche
Si nous devons obtenir des effets d'ombre multicouches, nous pouvons utiliser plusieurs attributs d'ombre de boîte pour les superposer. Voici un exemple de code pour obtenir un effet d'ombre multicouche :

HTML :

Ombre multicouche

CSS :
.box {
width : 200px;
hauteur : 200px;
couleur d'arrière-plan : #f1f1f1;
transition : box-shadow 0.3s;
}

.box:hover {
box-shadow : 0 0 10px rgba(0, 0, 0, 0.2),

          0 5px 15px rgba(0, 0, 0, 0.4),
          0 10px 20px rgba(0, 0, 0, 0.6);

}

Description du code :

• La partie HTML est la même que l'exemple précédent.

• Partie CSS, au sein de la pseudo-classe :hover, nous utilisons trois attributs box-shadow pour définir respectivement trois couches d'ombres

  • Le rayon de flou de la première couche d'ombre est de 10px et la transparence est de 0,2 ;
  Le deuxième calque Le rayon de flou de l'ombre est de 15 px et la transparence est de 0,4
  • Le rayon de flou du troisième calque d'ombre est de 20 px et la transparence est de 0,6 ;

3. Effet d'ombre irrégulier

Si nous voulons obtenir un effet d'ombre de forme irrégulière, nous pouvons utiliser des pseudo-classes et transformer les attributs en combinaison. Voici un exemple de code pour obtenir un effet d'ombre irrégulier :

HTML :

ombre irrégulière

CSS :

.box {
width : 200px;
height : 200px;
couleur d'arrière-plan : #f1f1f1;
transition : box-shadow 0,3s;
position : relative;
débordement : caché;
}

.box::before {

contenu : "";
position : absolue ;
largeur : 100 % ;
hauteur : 100 % ;
couleur d'arrière-plan : rgba(0, 0, 0, 0.4) ;
z-index : -1 ;
transition : transformation 0,3 s ;
}

.box:hover::before {
transformation : rotation (45deg);
gauche : 100 %;

}

Description du code :

La partie HTML est la même que l'exemple précédent.

Dans la partie CSS, nous utilisons la pseudo class::before pour créer un calque d'arrière-plan pivoté. Transform: rotate(-45deg) peut obtenir l'effet d'une rotation de 45 degrés.

• Lorsque la souris survole, utilisez la pseudo-classe :hover et l'attribut transform pour modifier l'angle de rotation et la position du calque d'arrière-plan afin d'obtenir des effets d'ombre irréguliers.
• Résumé :
• Cet article présente les techniques et méthodes d'utilisation de CSS pour obtenir des effets d'ombre lorsque la souris survole et donne des exemples de code spécifiques. En maîtrisant ces propriétés CSS de base et ces sélecteurs de pseudo-classes, nous pouvons facilement implémenter divers effets d'ombre au survol de la souris, augmentant ainsi l'attrait visuel et l'expérience utilisateur des pages Web.

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!