温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

CSS如何实现照片堆叠效果

发布时间:2022-02-28 15:16:14 来源:亿速云 阅读:236 作者:小新 栏目:web开发

这篇文章主要介绍了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如何实现照片堆叠效果”这篇文章对大家有帮助,同时也希望大家多多支持亿速云,关注亿速云行业资讯频道,更多相关知识等着你来学习!

向AI问一下细节

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

css
AI