CSS如何实现照片堆叠效果

这篇文章主要介绍了CSS如何实现照片堆叠效果,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

创新互联公司于2013年创立,先为德令哈等服务建站,德令哈等地企业,进行企业商务咨询服务。为德令哈企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

步骤

1.初始index.html

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

Photo Stack

初始的效果如下:

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

}

感谢你能够认真阅读完这篇文章,希望小编分享的“CSS如何实现照片堆叠效果”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!


网站标题:CSS如何实现照片堆叠效果
转载来于:http://scyanting.com/article/pogscd.html