Erstellen Sie einen Nur-CSS-Effekt für die Bilddarstellung mit transparenten Rahmen
EIN Nur CSS-Bilder zeigen den Effekt kann auf verschiedene Arten gelöst werden. Es ist eigentlich ziemlich einfach, ein Design zu kodieren, in dem Bild steht aus (wird von überflogen) sein solider Hintergrund -Sie gerade platziere ein Bild über einem kleineren Element mit festem Hintergrund.
Sie können das gleiche Ergebnis erhalten, wenn Sie verwenden transparente Grenzen, wo halten Sie die Größe des Hintergrundelements gleich als das des Vordergrunds und fügen Sie transparente Ränder hinzu, um Erstellen Sie einen leeren Raum für den Vordergrund zum Überlaufen.
Es gibt einige Vorteile bei der Verwendung der letzteren Methode. Da es die transparenten Ränder sind, die den Bereich für den Überlauf des Vordergrunds bieten, können wir dies tun steuern Sie die Richtung des Überlaufs zwischen dem linken, rechten, oberen und unteren Rand. Außerdem haben Sie die gleiche Größe für Vorder- und Hintergrund erleichtert das gleichzeitige Verschieben beider Elemente über die Seite.
Kurz gesagt, wir werden sehen, wie es geht Erstellen Sie einen Nur-CSS-Effekt Verwendung einer kleinerer fester Hintergrund mit einer Vordergrundbild mit transparenten Rändern. Sie können das überprüfen finale Demo unten.
1. Erstellen Sie den ursprünglichen Code
HTML-weise, einziger In der CSS verwenden wir zwei CSS-Variablen, Wir fügen auch das hinzu Wir füge ein leeres hinzu Das Wir fügen das Bild dem hinzu Das Auf der Screenshot unten Sie können sehen, was wir bis jetzt haben ( Hinzufügen kleinerer (ausziehbarer) Hintergrund hinter dem Bild, Wir werden das andere Pseudoelement verwenden, Wir erstellen eine weitere CSS-Variable, Das Breite wird berechnet als Das Höhe wird berechnet als Mit dem Ein CSS-Filter von Hier ist die Screenshot der Demo soweit gerendert (mit Wir Ergänzen Sie die Als wir bereits hinzugefügt Unten sehen Sie die finale Demo. Wenn Sie anzeigen
--bgc und --dim für die Hintergrundfarbe und das Maße des .foo Container. Im Beispiel habe ich die verwendet gleicher Wert Um Breite und Höhe für eine rechteckige Box zu erhalten, erstellen Sie getrennte Variablen für die Höhe und Breite, wenn Sie ein Rechteck wünschen.Position: relativ Regel zu .foo, so dass seine Pseudo-Elemente, für die wir verwenden werden das Bild enthüllen, kann sein absolut positioniert (siehe unten) und damit aufeinander gestapelt. .foo --bgc: # FFCC03; --dim: 300px; Breite: var (- dim); Höhe: var (- dim); Hintergrundfarbe: var (- bgc); Position: relativ;
Inhalt Eigentum zu beiden Pseudoelementen, .foo :: vorher und .foo :: nach, um sie richtig gerendert zu bekommen. .foo :: before, .foo :: after content: "; position: absolut; links: 0; oben: 0;
.foo Element, seine zwei Pseudo-Elemente, .foo :: vorher, .foo :: nach, und ihre :schweben Pseudoklassen Holen Sie sich ein Übergang Eigentum dieser Wille Fügen Sie einen einfachen Übergang hinzu für 500 Millisekunden (eine halbe Sekunde). .foo, .foo: hover, .foo :: vor, .foo :: nach, .foo: hover :: vor, .foo: hover :: nach umwandlung: 500ms leichtgängig machen;
2. Fügen Sie das Bild hinzu
.foo :: vorher Pseudoelement als Hintergrundbild, und Größe, um das gesamte Pseudoelement abzudecken mit dem Breite und Höhe Eigenschaften. Wir stapeln Sie es direkt unter .foo Element Verwendung der z-Index: -1 Regel. .foo :: before width: 100%; Höhe: 100%; Hintergrund: URL (camel.png) Mitte / Abdeckung; z-Index: -1;
Center Stichwort zentriert das Bild, während Abdeckung Stichwort skaliert das Bild auf das gesamte Element abdecken unter Beibehaltung des Seitenverhältnisses. z-index wird aus entfernt .foo :: vorher damit es gesehen werden kann):
3. Fügen Sie den Slide-Out-Hintergrund hinzu
.foo :: nach.--b, für die Rahmenbreite. Wir geben drei transparente Grenzen zum ::nach dem Pseudoelement: oben, rechts und unten. .foo :: after - b: 20px; Breite: berechnet (100% - var (- b)); Höhe: berechnet (100% - berechnet (var (- b) * 2)); Rand: var (- b) fest durchsichtig; links: keine; Box-Schatten: Einfügung 0 var (- dim) 0 var (- bgc); Filter: Helligkeit (0,8); z-Index: -2;
berechnet (100% - var - b)) das kehrt zurück die Gesamtbreite von .foo minus der Gesamtbreite der horizontalen Grenzen (nur rechte Grenze, da es keine linke Grenze gibt).calc (100% - calc (var (- b) * 2)) das kehrt zurück die Gesamthöhe von .foo minus der Gesamtbreite der vertikalen Ränder (obere und untere Ränder).Box Schatten Eigentum haben wir auch fügen Sie einen horizontalen Schatten hinzu gleich groß wie .foo (welches ist var (- dim)).Helligkeit (.8) verdunkelt die Hintergrundfarbe ein bisschen und schließlich die Z-Index: -2 Regel platziert die ::nach dem Pseudoelement darunter ::Vor das enthält das Bild.z-index von beiden Pseudoelementen entfernt, damit sie sichtbar sind):
4. Fügen Sie die Transformation hinzu
verwandeln Eigentum zu den beiden Pseudo-Elementen, also wenn der Benutzer darüber schwebt .foo, beide Pseudoelemente sind horizontal verschoben.Übergang Eigenschaft für alle Elemente Am Ende von Schritt 1 werden die Bewegung des Bildes und der Hintergrund angezeigt beide animiert. .foo: hover :: before, .foo: hover :: after transform: translateX (100%);
Bonus: Optionale Marge
.foo neben anderen Elementen auf einer Seite und wollen diese anderen Elemente wegziehen Wenn das Bild und sein Hintergrund herausgleitet, dann Fügen Sie einen rechten Rand hinzu, der dieselbe Breite hat wie der von .foo zum .foo: schweben Element. .foo: hover margin-right: var (- dim);
