CSS如何实现照片堆叠效果？（代码实例）

编程开发 2020-09-29 02:54:05 24

导读

实现效果步骤1.初始index.html为了建立第一张照片，也就是最上面的那张。我们只需要添加一个p，里面包含照片的img。就这么多，剩下的效果都是通过CSS来实现的。确保p的class为stackone。<!DOCTYPE html> <html> <head> &l……

实现效果

步骤

1.初始index.html

为了建立第一张照片，也就是最上面的那张。我们只需要添加一个p，里面包含照片的img。就这么多，剩下的效果都是通过CSS来实现的。确保p的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>   <p>     <img src="../../../assets/image/landscape-4378548_960_720.jpg">   </p> </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); }

此时效果相差甚远

CSS如何实现照片堆叠效果？（代码实例）

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

此时效果正常，初见端倪

CSS如何实现照片堆叠效果？（代码实例）

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如何实现照片堆叠效果？（代码实例）