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

Detaillierte Erläuterung des durch die CSS-Positionierung verursachten hierarchischen Beziehungsproblems

Beispielcode zur Implementierung eines Foto-Stacking-Effekts mit CSS

Detaillierte Erläuterung des durch die CSS-Positionierung verursachten hierarchischen Beziehungsproblems

So installieren Sie Docker mit YUM

Einfache Implementierung zum Ausblenden der Bildlaufleiste in HTML

Eclipse konfiguriert Tomcat und Tomcat hat eine ungültige Port-Lösung

So trennen Sie statischen und dynamischen Status durch die Kombination von Apache und Tomcat

Analyse von 2 Implementierungsmethoden zum Konfigurieren der JNID-Datenquelle in Tomcatc3p0

Einfaches Teilen von Mysql-Backup-BAT-Skripten unter Windows

Grafisches Tutorial zur Installation und Konfiguration der kostenlosen Installationsversion von MySQL 5.7.16

JavaScript implementiert die Maussteuerung eines frei beweglichen Fensters

So installieren Sie Mysql5.7 in Centos6

Artikel empfehlen

Beispielcode zur Implementierung der Bereitstellung mehrerer Anwendungen mit Tomcat+Nginx

Einfache Kapselung von Axios und Beispielcode zur Verwendung

Übertragung von Routing-Parametern für die Kommunikation von React-Komponenten (react-router-dom)

Erläuterung des MySQL-Multitabellen-Join-Abfragebeispiels

So erstellen Sie schnell eine LNMP-Umgebung mit Docker (neueste Version)

Implementierung des Durchklickens des transparenten Bereichs unregelmäßiger Formen in Electron

Confluence mit Docker bereitstellen

HTML imitiert die Dropdown-Menüfunktion der Baidu-Enzyklopädienavigation

Implementierung der Vue-Einzeldateikomponente

Details zum Schreiben von React in einem Vue-Projekt

Detaillierter Prozess für den Einstieg mit Docker Compose HelloWorld

JS implementiert den Beispielcode der Dezimalkonvertierung in Hexadezimal

Tomcat verwendet Thread-Pool zur Verarbeitung gleichzeitiger Remote-Anfragen

Grafisches Tutorial zur Installation und Konfiguration der Dekomprimierungsversion von MySQL 8.0.13

Miniprogramm zur Implementierung einer kreisförmigen Text-Scrolling-Animation