這篇文章主要介紹了CSS如何實現(xiàn)照片堆疊效果，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)公司于2013年創(chuàng)立，先為德令哈等服務(wù)建站，德令哈等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為德令哈企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

步驟

1.初始index.html

為了建立第一張照片，也就是最上面的那張。我們只需要添加一個div，里面包含照片的img。就這么多，剩下的效果都是通過CSS來實現(xiàn)的。確保div的class為stackone。

初始的效果如下：

2.The First Pseudo Element

現(xiàn)在我們添加一層底片。我們想得到的效果是：底層圖片看上去好像是在頂層照片下面。我們可以用CSS的偽類:before來實現(xiàn)。

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

}

此時效果相差甚遠(yuǎn)

3.完善before

這不是我們想要的效果。如何修復(fù)？我們需要給:before加入一些定位，然后設(shè)置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);

}

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“CSS如何實現(xiàn)照片堆疊效果”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!