Heim > Artikel > Web-Frontend > Wie erzielt man Bildlicht- und Schatteneffekte in CSS3? Einführung in die Methode zur Realisierung von Licht und Schatten in CSS3-Bildern
Wie erzielt man Bildlicht- und Schatteneffekte in CSS3? Einführung in die Methode zur Realisierung von Licht und Schatten in CSS3-Bildern
- 不言Original
- 2018-10-10 15:16:234265Durchsuche
Während des Erlernens von CSS3 wissen wir, dass einige der neuen Attribute in CSS3 leicht einige schöne Effekte erzielen können. In diesem Artikel stellen wir Ihnen einen Spezialeffekt vor – Bildlicht- und Schatteneffekte. Welche Licht- und Schattenwirkung haben Bilder? Manchmal können wir ein Bild auf einer Webseite sehen, wenn Sie mit der Maus über dieses Bild fahren. Das ist der Licht- und Schatteneffekt. Sie können CSS3 verwenden Um dies zu realisieren, gehen wir ohne Umschweife direkt zum Text.
Zunächst müssen wir wissen, dass CSS3 in diesem Artikel die Übergangsattribute und Transformationsattribute verwenden muss, um den Licht- und Schatteneffekt des Bildes zu erzielen.
Werfen wir einen kurzen Blick auf das Übergangsattribut und das Transformationsattribut. Die Eigenschaft
transition ist eine Abkürzungseigenschaft zum Festlegen von vier Übergangseigenschaften:
transition-property: Gibt den Namen der CSS-Eigenschaft an, die den Übergangseffekt festlegt.
Übergangsdauer: Gibt an, wie viele Sekunden oder Millisekunden es dauert, bis der Übergangseffekt abgeschlossen ist.
transition-timing-function: Gibt den Geschwindigkeitsverlauf des Geschwindigkeitseffekts an.
Übergangsverzögerung: Definieren Sie, wann der Übergangseffekt beginnt. Das
Transformationsattribut wendet eine 2D- oder 3D-Transformation auf ein Element an. Mit dieser Eigenschaft können wir das Element drehen, skalieren, verschieben oder neigen.
Nachdem wir diese beiden Attribute gelesen haben, schauen wir uns direkt den Code für die css3-Bildlicht- und Schattenimplementierung an:
Idee: Legen Sie eine transparente Ebene i fest, schräg x auf dem X Die Hintergrundfarbe wurde um minus 25 Grad verformt. Die Hintergrundfarbe war ein linearer Farbverlauf von CSS3, und beim Schweben wurde die Animationszeit auf 0,5 Sekunden eingestellt. Verwenden Sie gleichzeitig den Cursor:Zeiger auf Ebene i. Wenn dies nicht festgelegt ist, müssen Sie warten, bis die transparente Ebene animiert ist, bevor Sie den Zeiger sehen können.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="">
.overimg {
position: relative;
display: block; /* overflow: hidden;*/
-webkit-box-shadow: 0 0 10px #FFF;
box-shadow: 0 0 10px #FFF; /* overflow: hidden;*/
}
.light {
cursor: pointer;
position: absolute;
left: -100px;
top: 0;
width: 180px;
height: 90px;
background-image: -webkit-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0));
background-image: -moz-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0));
background-image: -o-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0));
background-image: -ms-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0));
background-image: linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0));
-webkit-transform: skewx(-25deg);
-moz-transform: skewx(-25deg);
-o-transform: skewx(-25deg);
-ms-transform: skewx(-25deg);
transform: skewx(-25deg);
}
.overimg:hover .light {
left: 180px;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
-ms-transition: 0.5s;
transition: 0.5s;
}
}
</style>
</head>
<body>
<p class="overimg">
<a><img src="images/pandas.jpg" style="max-width:90%" height="150px" alt="Wie erzielt man Bildlicht- und Schatteneffekte in CSS3? Einführung in die Methode zur Realisierung von Licht und Schatten in CSS3-Bildern" ></a>
<i class="light"></i>
</p>
</body>
</html>Die Licht- und Schatteneffekte von CSS3-Bildern sind wie folgt:
Das Obige ist der gesamte Inhalt dieses Artikels. Informationen zum Übergangsattribut und eine ausführlichere Erläuterung des Transformationsattributs finden Sie im CSS3-Lernhandbuch.
Das obige ist der detaillierte Inhalt vonWie erzielt man Bildlicht- und Schatteneffekte in CSS3? Einführung in die Methode zur Realisierung von Licht und Schatten in CSS3-Bildern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!