css如何实现图片堆叠效果

前端  /  管理员 发布于 7年前   181

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>

初始的效果如下：

2781c60c7d342a33acff95dc32d6910.png

（推荐教程：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);}

完成图：

7cc388c233d411f9b468cc02cd2bc9d.png

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

以上就是css如何实现图片堆叠效果的详细内容，更多请关注其它相关文章！


  • 上一条：
    css如何实现表单验证功能
    下一条：
    css如何实现n宫格布局

    • 昵称：

    邮箱：

    0条评论 (评论内容有缓存机制,请悉知!)
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客