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:0412771Durchsuche
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:
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]
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!