用CSS怎样做图片堆叠展示的效果?

Admin 2021-12-25 群英技术资讯

    这篇文章给大家分享的是用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);
}

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


 

    以上就是关于用CSS怎样做图片堆叠展示的效果的介绍,上述示例具有一定的借鉴价值,有需要的朋友可以参考学习,希望对大家学习CSS的使用有帮助,想要了解更多可以继续浏览群英网络其他相关的文章。

文本转载自脚本之家

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:[email protected]进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。

猜你喜欢

群英网络开启智能安全云计算之旅

注册领取新人大礼包
专业资深工程师驻守
7X24小时快速响应
一站式无忧技术支持
免费备案服务

联系我们

24小时售后 24小时售后TEL:0668-2555666 售前咨询TEL:400-678-4567 投诉建议TEL:0668-2555999 投诉建议邮箱:[email protected] 信息安全TEL:0668-2555118 域名空间客服 公司总机:0668-2555555 公司传真:0668-2555000
免费拨打  400-678-4567
免费拨打  400-678-4567 免费拨打 400-678-4567 或 0668-2555555
在线客服
微信公众号
返回顶部
返回顶部 返回顶部