Beispiel-Tutorial zur CSS3-Reflexion

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.

<!--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));}

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

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

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

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!