Maison >interface Web >tutoriel CSS >Comment utiliser CSS pour ajouter automatiquement un effet d'ombre lorsque la souris se déplace vers un bloc div ?
Comment utiliser CSS pour ajouter automatiquement un effet d'ombre lorsque la souris se déplace vers un bloc div ?
- 藏色散人original
- 2018-08-10 16:04:0412813parcourir
Lorsque nous parcourons des sites Web majeurs, cliquer sur les images peut provoquer des effets spéciaux tels qu'un agrandissement ou une rotation. Cet effet peut en effet rendre les yeux des gens plus brillants, et il peut également générer du trafic vers les clics des utilisateurs. Bien entendu, les puissantes fonctions CSS ne se limitent pas à de tels effets spéciaux. Cet article vous présentera un effet spécial plus intéressant, qui est l'effet d'ombre CSS produit lorsque la souris se déplace dans le bloc div, afin qu'elle puisse immédiatement créer un effet tridimensionnel.
L'exemple de code spécifique de l'effet d'ombre CSS est le suivant :
<style>
.shadow{
float:left;
margin-left:20px;
background: #EEFF99;
width:200px;
height:400px;
}
.shadow:hover{
-webkit-box-shadow: #ccc 0px 10px 10px;
-moz-box-shadow: #ccc 0px 10px 10px;
box-shadow: #ccc 0px 10px 10px; }
</style>
</head>
<body>
<div class="shadow"></div>
<div class="shadow"></div>
<div class="shadow"></div>
</body>La bordure d'ombre CSS de l'effet de test de code ci-dessus est la suivante :
Remarque : Que vous ajoutiez une ombre à cet élément, vous ne pouvez pas vous passer d'un attribut important : la pseudo-classe de survol. La pseudo-classe
:hover consiste à ajouter un style spécial à cet élément lorsque la souris passe dessus. Tant que vous maîtrisez l'utilisation de ce survol, vous pouvez facilement obtenir cet effet, que vous ajoutiez des ombres à des blocs div ou à des images.
Cette pseudo-classe applique des éléments qui sont dans un "état de survol". Le survol est défini comme lorsque l'utilisateur indique un élément mais ne l'active pas. L'exemple le plus courant consiste à déplacer le pointeur de la souris dans les limites d'un lien hypertexte dans un document HTML. En théorie, d'autres éléments pourraient être survolés, mais CSS ne définit pas lesquels.
[Recommandations de contenu associé]
Effet de commutation d'album photo tridimensionnel 3D extrêmement rapide HTML5
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!