CSS如何做图片堆叠展示的效果?
发布时间:2024-05-15 12:13:03 所属栏目:语言 来源:DaWei
导读: 这篇文章给大家分享的是用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); } 以上就是关于用CSS怎样做图片堆叠展示的效果的介绍,上述示例具有一定的借鉴价值,有需要的朋友可以参考学习,希望对大家学习CSS的使用有帮助。 (编辑:开发网_开封站长网) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
推荐文章
站长推荐