CSS实现照片堆叠效果的实例代码
发布时间:2019-08-15 15:31:50 作者:佚名 我要评论
这篇文章主要介绍了CSS实现照片堆叠效果的实例代码,需要的朋友可以参考下
(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun)
实现效果
步骤
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); }
最后大功告成,具有层次感:
原创说明
本篇文章迁移自本人于2014年12月29日 16:38:48在CSDN的博客 《css实现照片堆叠效果》
源博客参考翻译自 《Use Pseudo Elements to Create an Image Stack Illusion》
Github项目源码
相关文章
- 这是一个jQuery和CSS3实现全屏展开纸张堆叠样式的导航菜单特效,点击汉堡包按钮的时候,各个子菜单会以卡片的形式堆叠排列在视口中,点击子菜单会切换到相应页面2019-03-22
- 本特效源码是一款基于jQuery和CSS3插件hubSlider实现的超酷3D堆叠式幻灯片的代码,将各个slide堆叠在一起上下切换2016-05-17
- HTML5+CSS3图片堆叠转瀑布流布局特效源码是一款基于CSS3+HTML5实现的超酷风格堆叠相片转瀑布流网格布局动画效果代码。需要的朋友前来下载源码2016-04-07
- 本源码是一款效果非常炫酷的基于jQuery和CSS3实现的堆叠卡片样式导航菜单效果的代码。点击时各个子菜单会以卡片的形式堆叠排列在视口中2015-12-17
- 本代码是一组非常有创意的堆叠卡片切换动画特效。这些堆叠卡片切换效果通过点击“确定”或“取消”按钮,以不同的方式将最上面的卡片切换到底部2015-11-02
- 是一款实现了以不同的尺寸由小到大的堆叠在一起,当点击相应的面板后,这个面板会以过渡动画效果扩展到全屏大小的效果代码,本段代码适应于所有网页使用,有兴趣的朋友们可2015-09-06
最新评论