用CSS如何做图片堆叠展示的效果？

发布时间：2023-08-10 14:09:59 所属栏目：语言来源：

导读： 这篇文章给大家分享的是用CSS做图片堆叠展示的效果，具体的实现效果如下，这种图片展示的效果能增加网站的个性，美化页面，还是比较有趣的，因此分享给大家做个参考，文中示例代码介绍的很详细，感兴趣的朋友接下来

  这篇文章给大家分享的是用CSS做图片堆叠展示的效果，具体的实现效果如下，这种图片展示的效果能增加网站的个性，美化页面，还是比较有趣的，因此分享给大家做个参考，文中示例代码介绍的很详细，感兴趣的朋友接下来一起跟随小编看看吧。

    步骤

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

}

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!