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.
Quell-Blog-Referenz übersetzt aus „Verwenden Sie Pseudoelemente, um eine Bildstapel-Illusion zu erstellen“
Quellcode des Github-Projekts

<<: Besprechen Sie den Entwicklungstrend der Baidu Encyclopedia UI

>>: Detaillierte Erläuterung der Nginx-Prozessverwaltungs- und Neuladeprinzipien

Tutorial zum schnellen Bereitstellen eines Nebula Graph-Clusters mit Docker Swarm

Detaillierte Erläuterung zur Verwendung von Docker zum Erstellen einer einfachen Java-Entwicklungs- und Kompilierungsumgebung

Artikel

Detaillierte Erklärung der Verwendung von Object.assign() in ES6

Beispielcode zur Implementierung eines Foto-Stacking-Effekts mit CSS

Tutorial zum schnellen Bereitstellen eines Nebula Graph-Clusters mit Docker Swarm

Beispiel für die Verwendung von CSS zum Erzielen eines Schwebeeffekts beim Bewegen der Maus über die Karte

Zusammenfassung der Verzögerungen der MySQL-Slave-Bibliothek „Seconds_Behind_Master“

Beispielcode eines CSS-responsiven Layoutsystems

Lösung zur Installation von OpenCV 3.2.0 in Ubuntu 18.04

Mysql-Datenbankdesign - Analyse von drei Paradigmenbeispielen

Detaillierte Erläuterung zur Verwendung von Docker zum Erstellen einer einfachen Java-Entwicklungs- und Kompilierungsumgebung

Detaillierte Erklärung der Verwendung von Object.assign() in ES6

Docker trifft auf Intellij IDEA, Java-Entwicklung steigert die Produktivität um das Zehnfache

Untersuchung der Eingabetastenfunktion vom Typ „Datei“

Artikel empfehlen

Prozessanalyse der Bereitstellung von ASP.NET Core-Anwendungen auf dem Linux-System Docker

Verwendung des Fokus-innerhalb-Selektors von CSS3

So implementieren Sie die @person-Funktion über Vue

Einführung von Symbolen durch Implementierung benutzerdefinierter Komponenten auf Basis von Vue

So verwenden Sie Cursor-Trigger in MySQL

Linux wird geladen, vmlinux wird debuggt

Weitergabe von Techniken für Farbkontrast und -harmonie im Web

So legen Sie die Breite und Höhe von HTML-Tabellenzellen fest

Warum ist die Bildlaufleiste auf der Webseite rechts angebracht?

Detaillierte Analyse des Explain-Ausführungsplans in MySQL

So installieren Sie Tomcat-8.5.39 auf centos7.6

Das WeChat-Applet ermöglicht horizontales und vertikales Scrollen

Methode zum Erstellen eines Redis-Clusters basierend auf Docker

Warum wird in Vue nicht empfohlen, einen Index als Schlüsselattributwert zu verwenden?

JavaScript zum Erreichen eines einfachen Bildwechsels