Geschickte Nutzung von WebKit-Box-Reflect zur Erzielung verschiedener dynamischer Effekte (Zusammenfassung)

In einem Artikel vor langer Zeit habe ich über die Eigenschaft -webkit-box-reflect gesprochen - Lassen Sie uns über die CSS-Vererbung von der Reflexion sprechen

-webkit-box-reflect ist eine sehr interessante Eigenschaft, die CSS die Möglichkeit gibt, den ursprünglich von unserem Element gezeichneten Inhalt wie ein Spiegel zu reflektieren.

Als ich es das letzte Mal geschrieben habe, war die Kompatibilität sehr, sehr schlecht. Aber heute ist die Kompatibilität, obwohl es immer noch eine nicht standardisierte Syntax ist, stark verbessert und wir können damit viele interessante Effekte erzielen.

Am 19.02.2021 hat die Kompatibilität 91,02 % erreicht. Sehen Sie sich CANIUSE -webkit-box-reflect an:

Geben Sie als nächstes den Haupttext ein.

-webkit-box-reflect grundlegende Verwendung

Die Syntax von -webkit-box-reflect ist sehr einfach. Die einfachste Verwendung ist wie folgt:

div {
    -webkit-box-reflect: unten;
}

Darunter kann unten unten | oben | links | rechts sein, was unten, oben, links und rechts darstellt, d. h. es stehen 4 Richtungen zur Auswahl.

Nehmen wir an, wir haben das folgende Bild:

<div></div>

div {
    Hintergrundbild: URL('https://images.pokemontcg.io/xy2/12_hires.png');
} 

Fügen Sie -webkit-box-reflect: right , also die Reflexion auf der rechten Seite:

div {
    Hintergrundbild: URL('https://images.pokemontcg.io/xy2/12_hires.png');
    -webkit-box-reflect: richtig;
}

Der Effekt ist wie folgt: Es wird ein spiegelbildliches Element auf der rechten Seite eines Elements erzeugt:

Stellen Sie den Reflexionsabstand ein

Nach der Richtung können Sie außerdem einen konkreten Zahlenwert hinzufügen, um die Entfernung zwischen der Spiegelung und dem Originalelement anzugeben.

div {
    Hintergrundbild: URL('https://images.pokemontcg.io/xy2/12_hires.png');
    -webkit-box-reflect: rechts 10px;
}

Nach dem Hinzufügen 10px besteht zwischen der Reflexion und dem Originalelement eine Lücke 10px :

Reflexionsrealität einstellen

Eine weitere sehr wichtige Funktion besteht darin, dass Sie hinter der Richtung einen Verlaufswert festlegen können. Mit diesem Verlaufswert können Sie einen Unschärfeeffekt der Reflexion erzielen, was sehr wichtig ist.

div {
    Hintergrundbild: URL('https://images.pokemontcg.io/xy2/12_hires.png');
    -webkit-box-reflect: unter 2px linearer Farbverlauf (transparent, rgba (0, 0, 0, .5));
}

Schauen Sie sich den Effekt an. Nach der virtuellen und realen Veränderung sieht es eher wie eine Spiegelung aus.

Tatsächlich dient der Farbverlauf hier dazu, dem reflektierten Bild ein MASK-Attribut hinzuzufügen. Der transparent Teil des MASK-Attributs macht das Bild transparent, während der einfarbige Teil das Originalbild bleibt.

Wenn Sie Fragen zum CSS-MASK-Attribut haben, empfehle ich Ihnen, diesen Artikel zu lesen: Die wunderbare CSS-MASK

CodePen-Demo – -webkit-box-reflect-Demo

Verwenden Sie -webkit-box-reflect, um einige interessante Animationseffekte zu erzielen

Nachdem wir die grundlegende Grammatik beherrschen, können wir damit einige interessante Animationseffekte erzielen, die im Folgenden kurz aufgeführt sind.

Ich habe festgestellt, dass sich dieses Attribut besonders für die Verwendung auf einigen Seiten im dunklen Stil eignet. Dadurch können viele dynamische Effekte deutlich fortschrittlicher wirken. (Persönliche Ästhetik)

Verwenden von -webkit-box-reflect in Schaltflächen

In Kombination mit einigen Schaltflächen mit dynamischen Rahmenanimationen kann ein sehr Science-Fiction-artiger Effekt erzeugt werden:

Bei Interesse können Sie den Quellcode überprüfen:

CodePen-Demo -webkit-box-reflect Neon Button Hover-Effekt

Verwenden von -webkit-box-reflect im Text

Im dunklen Titeltext wirkt die Verwendung von -webkit-box-reflect sofort eleganter.

CodePen-Demo – Schriftart & -webkit-box-reflect

Verwenden von -webkit-box-reflect in 3D

Hey, als nächstes können wir sogar -webkit-box-reflect auf den 3D-Effekt anwenden, was uns ein völlig anderes Seherlebnis bietet.

Wir fügen einer 3D-Fotowand einen Reflexionseffekt hinzu:

CodePen-Demo – 3D-Ansicht und -WebKit-Box-Reflect

Erstellen künstlerischer Muster mit -webkit-box-reflect

Interessante CSS-Kunst, hier kommt sie wieder.

In diesem Artikel von Professor Yuan Chuan – Chinesisches Fenstergitter und CSS – wird die Idee vorgestellt, -webkit-box-reflect zur Generierung von Papierschnittkunst zu verwenden.

Da -webkit-box-reflect Reflexionen erzeugen kann, können wir damit Puppen kontinuierlich verschachteln, Schicht für Schicht. Dann müssen wir nur noch ein Grundelement erzeugen und können Reflexionen verwenden, um verschiedene Effekte zu erzeugen.

Angenommen, wir haben die folgende Struktur:

<div Klasse="g-wrap1">
    <div Klasse="g-wrap2">
        <div Klasse="g-wrap3">
            <div Klasse="g-wrap4"></div>
        </div>
    </div>
</div>

Wir müssen lediglich eine Grafik für .g-wrap4 implementieren, und zwar wie folgt:

.g-wrap4 {
    Hintergrund: 
        radial-gradient(Kreis bei 0 0, #000 30%, transparent 30%, transparent 40%, #000 40%, #000 50%, transparent 50%),
        radialer Farbverlauf (Kreis bei 100 % 100 %, Nr. 000 10 %, transparent 10 %, transparent 30 %, Nr. 000 30 %, Nr. 000 40 %, transparent 40 %);
} 

Dann gibt es 4 Schichten von Matrjoschkas. Fügen Sie zuerst eine Schicht von Reflektion -webkit-box-reflect zu .g-wrap4 hinzu:

.g-wrap4 {
    -webkit-box-reflect: rechts 0px;
}

erhalten:

Fahren Sie mit dem Einordnen der Puppen fort und fügen Sie eine Ebene mit Reflexion -webkit-box-reflect zu .g-wrap3 hinzu:

.g-wrap4 {
    -webkit-box-reflect: rechts 0px;
}
.g-wrap3 {
    -webkit-box-reflect: unter 0px;
} 

Fahren Sie fort und fügen Sie eine Ebene mit Reflexion -webkit-box-reflect zu .g-wrap2 hinzu:

.g-wrap4 {
    -webkit-box-reflect: rechts 0px;
}
.g-wrap3 {
    -webkit-box-reflect: unter 0px;
}
.g-wrap2 {
    -webkit-box-reflect: links 0px;
} 

Fügen Sie abschließend eine Reflexionsebene -webkit-box-reflect zu .g-wrap1 hinzu:

.g-wrap4 {
    -webkit-box-reflect: rechts 0px;
}
.g-wrap3 {
    -webkit-box-reflect: unter 0px;
}
.g-wrap2 {
    -webkit-box-reflect: links 0px;
}
.g-wrap1 {
    -webkit-box-reflect: über 0px;
}

Sie können eine Figur erhalten, die durch 4 Reflexionsebenen erhalten wird:

Auf diese Weise können wir mithilfe verschiedener Grundgrafiken und mithilfe unserer Vorstellungskraft eine Vielzahl symmetrischer Papierschnittgrafiken erstellen:

Für den vollständigen Code können Sie hier klicken: CodePen Demo --webkit-box-reflect artist

endlich

Dieser Artikel endet hier. Ich hoffe, er ist hilfreich für Sie. Dieser Artikel stellt einige interessante Verwendungsmöglichkeiten von webkit-box-reflect vor. Im Geschäftsleben ist das vielleicht nicht sehr praktisch, aber sehr interessant.

Dies ist das Ende dieses Artikels über die Verwendung von webkit-box-reflect zum Erzielen verschiedener Animationseffekte (Zusammenfassung). Weitere verwandte Inhalte zu webkit-box-reflect finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder durchsuchen Sie die verwandten Artikel weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!