Beispielcode zur Implementierung eines Foto-Stacking-Effekts mit CSS
|
Ergebnisse erzielen Schritt 1. Ursprüngliche index.html Um das erste Foto aufzubauen, das oben. Wir müssen nur ein Div hinzufügen, das das IMG des Fotos enthält. Das ist alles, die restlichen Effekte werden durch CSS erzielt. Stellen Sie sicher, dass das Div die Klasse Stackone hat.
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<meta http-equiv="X-UA-kompatibel" content="ie=edge">
<title>Fotostapel</title>
<Stil>
* {
Rand: 0;
Polsterung: 0;
}
html,
Körper {
Breite: 100 %;
Höhe: 100%;
Überlauf: versteckt;
}
.stackone {
--Bildbreite: 480px;
--Bildhöhe: 320px;
Rand: 6px durchgezogen #fff;
schweben: links;
Höhe:var(--img-height);
Breite: var(--img-width);
Rand: 50px;
Position: relativ;
-webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0,3);
-moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0,3);
Kastenschatten: 2px 2px 5px rgba (0, 0, 0, 0,3);
}
.stackone img {
Breite: var(--img-width);
}
</Stil>
</Kopf>
<Text>
<div Klasse="stackone">
<img src="../../../assets/image/landscape-4378548_960_720.jpg">
</div>
</body>
</html>Die anfängliche Wirkung ist wie folgt:
2. Das erste Pseudoelement Jetzt fügen wir eine Negativebene hinzu. Der gewünschte Effekt besteht darin, dass das untere Bild unter dem oberen Foto zu liegen scheint. Um dies zu erreichen, können wir die CSS-Pseudoklasse: before verwenden.
.stackone::vor {
Inhalt: "";
Höhe:var(--img-height);
Breite: var(--img-width);
Hintergrund: #eff4de;
Rand: 6px durchgezogen #fff;
-webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0,3);
-moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0,3);
Kastenschatten: 2px 2px 5px rgba (0, 0, 0, 0,3);
}Die Wirkung ist jetzt ganz anders
3. Verbessern Sie vor Das ist nicht der gewünschte Effekt. Wie kann ich das Problem beheben? Wir müssen dem :before etwas Positionierung hinzufügen und dann den Z-Index so einstellen, dass es dahinter platziert wird.
.stackone::vor {
Inhalt: "";
Höhe:var(--img-height);
Breite: var(--img-width);
Hintergrund: #eff4de;
Rand: 6px durchgezogen #fff;
Position: absolut;
z-Index: -1;
oben: 0px;
links: -10px;
-webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0,3);
-moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0,3);
Kastenschatten: 2px 2px 5px rgba (0, 0, 0, 0,3);
-webkit-transform: drehen(-5 Grad);
-moz-transform:drehen(-5Grad);
-o-transform: drehen(-5 Grad);
-ms-transform:drehen(-5Grad);
transformieren: drehen (-5 Grad);
}Der Effekt ist zu diesem Zeitpunkt normal und die ersten Anzeichen sind zu sehen
4. Das zweite Pseudoelement
.stackone::nach {
Inhalt: "";
Höhe:var(--img-height);
Breite: var(--img-width);
Hintergrund: hellblau;
Rand: 6px durchgezogen #fff;
Position: absolut;
z-Index: -1;
oben: 5px;
links: 0px;
-webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0,3);
-moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0,3);
Kastenschatten: 2px 2px 5px rgba (0, 0, 0, 0,3);
-webkit-transform: drehen(4 Grad);
-moz-transform:drehen(4Grad);
-o-transform: drehen (4 Grad);
-ms-transform:drehen(4Grad);
transformieren: drehen (4 Grad);
}Schließlich ist es geschafft, mit einem Gefühl der Hierarchie:
Originalbeschreibung Dieser Artikel wurde am 29. Dezember 2014 um 16:38:48 Uhr aus meinem Blog „CSS zum Erzielen eines Fotostapeleffekts“ auf CSDN migriert. |
<<: Besprechen Sie den Entwicklungstrend der Baidu Encyclopedia UI
>>: Detaillierte Erläuterung der Nginx-Prozessverwaltungs- und Neuladeprinzipien
Artikel empfehlen
So lösen Sie das Problem der Groß-/Kleinschreibung bei MySQL-Abfragen
Frage Als ich kürzlich ein praktisches Projekt mi...
js implementiert eine Formularvalidierungsfunktion
In diesem Artikelbeispiel wird der spezifische Co...
Tutorial zum Anzeigen und Ändern von MySQL-Zeichensätzen
1. Überprüfen Sie den Zeichensatz 1. Überprüfen S...
Verwenden Sie js, um ein einfaches Schlangenspiel zu schreiben
In diesem Artikel wird der spezifische Code eines...
Vergleich von mydumper und mysqldump in MySQL
Wenn Sie nur ein paar Tabellen oder eine einzelne...
JavaScript zum Erreichen der Produktabfragefunktion
In diesem Artikelbeispiel wird der spezifische Ja...
Detaillierte Erläuterung der Ideen zur Leistungsoptimierung für funktionale React-Komponenten
Optimierungsideen Es gibt zwei Hauptoptimierungsr...
CSS erkennt, dass die linke Seite der Webseitenspalte fixiert ist und passt die Position beim Scrollen nach unten automatisch an
Vorschauadresse: https://ovsexia.gitee.io/leftfix...
Eine eingehende Analyse von MySQL erläutert die Verwendung und die Ergebnisse
Vorwort Bei unserer täglichen Arbeit führen wir m...
Das Problem zweier Anfragen, wenn der src-Attributwert des img-Tags leer ist (Nicht-IE-Browser)
Wenn der img src-Wert leer ist, werden zwei Anfrag...
Navicat-Remoteverbindung zur MySQL-Implementierungsschritteanalyse
Vorwort Ich glaube, dass jeder auf einem Remote-S...
Lösen Sie das Problem der Verkleinerung des Mysql-Transaktionsprotokolls und der Protokolldateien, die zu groß zum Verkleinern sind
1. MS SQL SERVER 2005 --1. Löschen Sie das Protok...
Implementierung eines Puzzlespiels mit js
In diesem Artikel wird der spezifische Code von j...
MySQL-Paging-Abfragemethode für Millionen von Datenmengen und ihre Optimierungsvorschläge
Die SQL-Optimierung von Datenbanken ist ein häufi...
Detaillierte Erläuterung der Clientkonfiguration für die Entwicklung von vue3 + electron12 + dll
Inhaltsverzeichnis Ändern der Repository-Quelle S...