Heim > Artikel > Web-Frontend > Wie verwende ich CSS, um automatisch einen Schatteneffekt hinzuzufügen, wenn die Maus zu einem Div-Block bewegt wird?

Wie verwende ich CSS, um automatisch einen Schatteneffekt hinzuzufügen, wenn die Maus zu einem Div-Block bewegt wird?

藏色散人Original: 2018-08-10 16:04:0412688Durchsuche

Wenn wir auf wichtigen Websites surfen, kann das Klicken auf die Bilder zu Spezialeffekten wie Vergrößerung oder Drehung führen. Dieser Effekt kann tatsächlich dazu führen, dass die Augen der Menschen leuchten, und er kann auch Traffic auf die Klicks der Benutzer bringen. Natürlich beschränken sich die leistungsstarken CSS-Funktionen nicht nur auf solche Spezialeffekte. In diesem Artikel wird Ihnen ein cooler Spezialeffekt vorgestellt, nämlich der CSS-Schatteneffekt, der erzeugt wird, wenn die Maus in den Div-Block bewegt wird, sodass sofort ein dreidimensionaler Effekt erzeugt werden kann.

Das spezifische Codebeispiel für den CSS-Schatteneffekt lautet wie folgt:

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

Der obige Codetesteffekt für den CSS-Schattenrand lautet wie folgt:

Wie verwende ich CSS, um automatisch einen Schatteneffekt hinzuzufügen, wenn die Maus zu einem Div-Block bewegt wird?

Hinweis: Unabhängig davon, ob Sie diesem Element einen Schatten hinzufügen, können Sie auf ein wichtiges Attribut nicht verzichten: die Hover-Pseudoklasse. Die Pseudoklasse

:hover dient dazu, diesem Element einen speziellen Stil hinzuzufügen, wenn die Maus darüber bewegt wird. Solange Sie die Verwendung dieses Hovers beherrschen, können Sie diesen Effekt problemlos erzielen, unabhängig davon, ob Sie Div-Blöcken oder Bildern Schatten hinzufügen.

Diese Pseudoklasse wendet Elemente an, die sich in einem „Hover-Zustand“ befinden. Hover ist definiert als wenn der Benutzer ein Element anzeigt, es aber nicht aktiviert. Das häufigste Beispiel hierfür ist das Bewegen des Mauszeigers innerhalb der Grenzen eines Hyperlinks in einem HTML-Dokument. Theoretisch könnten andere Elemente mit der Maus bewegt werden, aber CSS definiert nicht, welche.

[Empfehlungen für verwandte Inhalte]

Wie verwende ich CSS, um Bildern einen dreidimensionalen Effekt auf der Seite zu verleihen? (Code tatsächlicher Test)

HTML5 extrem schneller 3D-Effekt zum Wechseln dreidimensionaler Bilderalben

Das obige ist der detaillierte Inhalt vonWie verwende ich CSS, um automatisch einen Schatteneffekt hinzuzufügen, wenn die Maus zu einem Div-Block bewegt wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

html5 css html 指针伪类

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Wie erstelle ich mit CSS einen gut aussehenden Suchfeldstil? (Codebeispiel)Nächster Artikel：Wie erstelle ich mit CSS einen gut aussehenden Suchfeldstil? (Codebeispiel)

In Verbindung stehende Artikel

Mehr sehen