实现效果
步骤
1.初始index.html
为了建立第一张照片，也就是最上面的那张。我们只需要添加一个div，里面包含照片的img。就这么多，剩下的效果都是通过CSS来实现的。确保div的class为stackone。
<!DOCTYPE html><html lang="en"><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 class="stackone"><img src="../../../assets/image/landscape-4378548_960_720.jpg"></div></body></html>
初始的效果如下：
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);}
最后大功告成，具有层次感：
更多大型互联网web前端实战操作，在线解析，学习指导，学习资源，点：【WEB前端资源】
