CSS实现照片堆叠效果的实例代码
发布时间：2019-08-15 15:31:50 作者：佚名 
我要评论
我要评论这篇文章主要介绍了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);
}
最后大功告成，具有层次感：
原创说明
本篇文章迁移自本人于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
最新评论