您的位置 首页 css教程

css如何实现图片堆叠效果

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如何实现图片堆叠效果

文章地址:https://www.pyhw.net/30556_css%e5%a6%82%e4%bd%95%e5%ae%9e%e7%8e%b0%e5%9b%be%e7%89%87%e5%a0%86%e5%8f%a0%e6%95%88%e6%9e%9c-2.html

关于作者: 火云技术网

热门文章

发表评论

您的电子邮箱地址不会被公开。

网站地图