Maison > Article > interface Web > 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:0412757parcourir

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 :

Comment utiliser CSS pour ajouter automatiquement un effet dombre lorsque la souris se déplace vers un bloc div ?

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é]

Comment utiliser le CSS pour que les images aient un effet tridimensionnel sur la page (Test du code réel)

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!

html5 css html 指针伪类

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment créer un beau style de champ de recherche avec CSS ? (exemple de code)Article suivant：Comment créer un beau style de champ de recherche avec CSS ? (exemple de code)

Articles Liés

Voir plus