css实现照片堆叠效果

来源：互联网发布：python .fillna 编辑：程序博客网时间：2024/05/29 14:28

原文:http://designshack.net/articles/css/use-pseudo-elements-to-create-an-image-stack-illusion/

效果图：

The HTML

为了建立第一张照片，也就是最上面的那张。我们只需要添加一个div，里面包含照片的img。就这么多，剩下的效果都是通过CSS来实现的。确保div的class为stackone。

<div class="stackone">    <img src="http://lorempixel.com/400/200/sports/1"></div>

Basic Styles

这里没有什么复杂的地方，只是设置基本的margin和padding，目的是让所有的浏览器得到相同的页面效果。

* {margin:0px; padding:0px;}body {background:#ccd3d7;}

Top Image Styles

顶层照片的样式CSS

.stackone {    border: 6px solid #fff;    float: left;    height: 200px; width: 200px;    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);}

其中前5行决定图片的大小和位置；后面3行设置阴影效果，为了得到比较好看的立体效果。
到这里，图片应该是这样的：

The First Pseudo Element

现在我们添加一层底片。我们想得到的效果是：底层图片看上去好像是在顶层照片下面。我们可以用CSS的伪类:before来实现。

.stackone:before {    content: "";    height: 200px; width: 200px;        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);}

到这里，图片却这样：

这不是我们想要的效果。如何修复？我们需要给:before加入一些定位，然后设置z-index将它放在后面。

.stackone:before {    content: "";    height: 200px; width: 200px;    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);}

再次检查，图片正常了!

The Second Pseudo Element

.stackone:after {    content: "";    height: 200px; width: 200px;    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);}

大功告成：

0 0