Heim > Artikel > Web-Frontend > So erzielen Sie einen Bildstapeleffekt in CSS
So erzielen Sie einen Bildstapeleffekt in CSS
- 王林nach vorne
- 2020-03-12 17:57:053837Durchsuche
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>Der anfängliche Effekt ist wie folgt:
(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);
}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);
}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);
}Vollständiges Bild:
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!