html图片叠,很棒的CSS3图片堆叠效果

使用 :before  :after伪元素，以便做一些有趣的效果与CSS。在这里，我要告诉你如何创建一个简单的'堆叠'看一些图片。 第一步 创建HTML代码

第二步 使用CSS

.stack { position: relative; z-index: 10; }

/* Image styles */

.stack img { max-width: 100%; height: auto; vertical-align: bottom; border: 10px solid #fff; border-radius: 3px;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);

-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);

box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);

}

/* Stacks creted by the use of generated content */

.stack:before, .stack:after { content: ""; border-radius: 3px; width: 100%; height: 100%; position: absolute; border: 10px solid #fff; left: 0;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);

-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);

box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);

-webkit-transition: 0.3s all ease-out;

-moz-transition: 0.3s all ease-out;

transition: 0.3s all ease-out;

}

.stack:before { top: 4px; z-index: -10; } /* 1st element in stack (behind image) */

.stack:after { top: 8px; z-index: -20; } /* 2nd element in stack (behind image) */

相关链接