Beispiel-Tutorial zur CSS3-Reflexion

Teilen

Beispielbild

Vor CSS3 war die einzige Möglichkeit, einen Reflexionseffekt wie das Beispielbild zu erzielen, die Verarbeitung des Bildes Methode, und seit der Einführung von CSS3 ist es sehr einfach geworden, einen solchen Effekt zu erzielen. Er kann leicht mit nur einem CSS3-Attribut erreicht werden.

Dies ist das Box-Reflect-Attribut, das wir heute erwähnen werden.

Werfen wir zunächst einen Blick auf die von W3C bereitgestellte Box-Reflect-Syntax:

Box-Reflect: keine ? -image> ;? (? stellt Standard dar, d. h. die beiden letztgenannten Attribute sind optional)
;Offset> = radialer Gradient> | >Standardwert: none


box-reflect kann zwei Attributwerte angeben, einer ist none, der Standardwert, das heißt, es gibt keinen Reflexionseffekt, und der andere ist unser Was wir sind Heute geht es darum, dass ihm drei Attributwerte gleichzeitig zugewiesen werden können, die wiederum die Reflexionsrichtung, den Abstand zwischen dem Element und der Reflexion sowie das zur Reflexion hinzugefügte Maskenbild darstellen Die letzten beiden Attributwerte können standardmäßig verwendet werden. Wenn jedoch vorhanden ist, ist erforderlich.

Nachdem wir über so viele trockene Erklärungen gesprochen haben, ist es vielleicht besser, sie anhand einiger Beispiele zu verstehen.

Wir werden nun Schritt für Schritt den Projektionseffekt des Beispielbildes am Anfang des Artikels umsetzen:

① Geben Sie unten nur einen Attributwert an.

Erzielen Sie den Effekt:

<!--HTML代码-->< img class="img" src="imgs/cat.jpg" />

/*CSS代码*/.img{ -webkit-box-reflect: below; box-reflect: below;}

②Fügen Sie einen Abstand von 5 Pixeln hinzu.

Erzielen Sie den Effekt:

/*CSS代码*/.img{ -webkit-box-reflect: below 5px; box-reflect: below 5px;}

③ Fügen Sie abschließend eine Bildmaske hinzu.

Die Bildmaske verwendet hier keine Bilder, sondern den Attributwert linear-gradient. Er wird für lineare Farbverläufe verwendet. Sie können hier direkt nachsehen ( ), sehr detailliert geschrieben.

/*CSS代码*/.img{ -webkit-box-reflect: below 5px -webkit-linear-gradient(transparent 60%,rgba(0,0,0,.3));box-reflect: below 5px linear-gradient(transparent 60%,rgba(0,0,0,.3));}

Erzielen Sie den Effekt:

Dies ist der endgültige Effekt des Beispielbildes am Anfang des Artikels.

Als Nächstes sprechen wir über das Erstellen von Bildmasken mit radialen Farbverläufen und die direkte Verwendung von Bildmasken.

Der radiale Farbverlauf ähnelt tatsächlich dem linearen Farbverlauf. Sie müssen nur die grundlegende radiale Farbverlaufsmethode in CSS3 beherrschen:

Erzielen Sie den Effekt:

/*CSS代码*/.img{ -webkit-box-reflect: left 0 -webkit-radial-gradient(#000 30%,transparent); box-reflect: left 0 radial-gradient(#000 30%,transparent);}

Die Wirkung ist großartig! Es ist, als würde die Katze wirklich in den Spiegel schauen~~

Was wäre, wenn Sie die Bildmaske direkt verwenden? Ich verwende zum Beispiel dieses Bild als Maske:

um den Effekt zu erzielen:

/*CSS代码*/.img{ -webkit-box-reflect: right 0 url(imgs/mask.png); box-reflect: right 0 url(imgs/mask.png);}

Maske .png

Es ist ersichtlich, dass das Maskenbild vollständig gestreckt wird, um das Reflexionsbild auszufüllen, und der Effekt ist, dass der vollständig transparente Teil nicht angezeigt wird (eigentlich das CSS3-Verlaufsbild). Das Maskenprinzip ist das gleiche).

Es ist zu beachten, dass alle oben genannten Effekte nicht nur auf Bilder, sondern auch auf andere Elemente, wie z. B. Text, angewendet werden können.

Kompatibilität: Obwohl Box-Reflect sehr gut aussieht, ist es derzeit leider nur mit Webkit-Core-Browsern kompatibel, aber mit dem mobilen Endgerät gibt es grundsätzlich keine Probleme~~

Das obige ist der detaillierte Inhalt vonBeispiel-Tutorial zur CSS3-Reflexion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!