html 图片重叠效果,CSS实现照片堆叠效果的实例代码

实现效果

步骤

1.初始index.html

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

Photo Stack

* {

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);