首页 >> 全栈工程 >>CSS >> CSS如何实现照片堆叠效果?(代码实例)
详细内容

CSS如何实现照片堆叠效果?(代码实例)

时间:2020-07-29        阅读

CSS如何实现照片堆叠效果?下面本篇文章来给大家通过实例代码来介绍一下。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。


实现效果

5.png

步骤

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>

初始的效果如下:

1.png

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

此时效果相差甚远

2.png

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

此时效果正常,初见端倪

3.png

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

最后大功告成,具有层次感:

4.png

更多web前端开发知识,请查阅ots网络安全门户 !!!

最新评论
请先登录才能进行回复登录
技术支持: 建站ABC | 管理登录