css如何实现图片堆叠效果

来源：喜迪情感

1、初始index.html

为了建立第一张照片，也就是最上面的那张。我们只需要添加一个div，里面包含照片的img。就这么多，剩下的效果都是通过CSS来实现的。确保div的class为stackone。

<!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" /> 
 </div> 
 </body>
</html>

初始的效果如下：

（推荐教程：CSS入门教程）

2、The First Pseudo Element

现在我们添加一层底片。我们想得到的效果是：底层图片看上去好像是在顶层照片下面。我们可以用CSS的伪类:before来实现。

.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、完善before

给:before加入一些定位，然后设置z-index将它放在后面。

.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、The Second Pseudo Element

.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);
}

完成图：

相关视频教程推荐：css视频教程