So erzielen Sie einen Bildstapeleffekt in CSS-CSS-Tutorial-php.cn

So erzielen Sie einen Bildstapeleffekt in CSS

王林

Freigeben： 2020-03-12 17:57:05

nach vorne

3918 Leute haben es durchsucht

So erzielen Sie einen Bildstapeleffekt in CSS

1. Initial index.html

Um das erste Foto zu erstellen, das das oberste ist. Wir müssen nur ein Div hinzufügen, das das Bild des Fotos enthält. Das ist alles, die restlichen Effekte werden durch CSS erzielt. Stellen Sie sicher, dass die Klasse des Divs „stackone“ ist.

<!DOCTYPE html>
<html>
 <head> 
  <meta charset="UTF-8" /> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
  <meta http-equiv="X-UA-Compatible" content="ie=edge" /> 
  <title>Photo Stack</title> 
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    html,
    body {
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
    .stackone {
      --img-width: 480px;
      --img-height: 320px;
      border: 6px solid #fff;
      float: left;
      height:var(--img-height);
      width: var(--img-width);
      margin: 50px;
      position: relative;
      -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
      -moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
      box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
    }
    .stackone img {
      width: var(--img-width);
    }
  </style> 
 </head> 
 <body> 
  <div> 
   <img  src="../../../assets/image/landscape-4378548_960_720.jpg" / alt="So erzielen Sie einen Bildstapeleffekt in CSS" > 
  </div>  
 </body>
</html>

Nach dem Login kopieren

Der anfängliche Effekt ist wie folgt:

So erzielen Sie einen Bildstapeleffekt in CSS

(Empfohlenes Tutorial: CSS-Einführungs-Tutorial)

2 . Das erste Pseudoelement

Jetzt fügen wir eine negative Ebene 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::before {
  content: "";
  height:var(--img-height);
  width: var(--img-width);
  background: #eff4de;
  border: 6px solid #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);
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}

Nach dem Login kopieren

3. Vorher verbessern

Fügen Sie etwas Positionierung zu: vorher hinzu und stellen Sie dann den Z-Index ein, um ihn nach hinten zu stellen.

.stackone::before {
  content: "";
  height:var(--img-height);
  width: var(--img-width);
  background: #eff4de;
  border: 6px solid #fff;
 
  position: absolute;
  z-index: -1;
  top: 0px;
  left: -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);
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
 
  -webkit-transform: rotate(-5deg);
  -moz-transform: rotate(-5deg);
  -o-transform: rotate(-5deg);
  -ms-transform: rotate(-5deg);
  transform: rotate(-5deg);
}

Nach dem Login kopieren

4. Das zweite Pseudoelement

.stackone::after {
  content: "";
  height:var(--img-height);
  width: var(--img-width);
  background: lightblue;
  border: 6px solid #fff;
  position: absolute;
  z-index: -1;
  top: 5px;
  left: 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);
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
  -webkit-transform: rotate(4deg);
  -moz-transform: rotate(4deg);
  -o-transform: rotate(4deg);
  -ms-transform: rotate(4deg);
  transform: rotate(4deg);
}

Nach dem Login kopieren

Vollständiges Bild:

So erzielen Sie einen Bildstapeleffekt in CSS

Empfohlene verwandte Video-Tutorials: css Video-Tutorial

Das obige ist der detaillierte Inhalt vonSo erzielen Sie einen Bildstapeleffekt in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!