資訊專欄INFORMATION COLUMN
摘要：實(shí)現(xiàn)效果步驟初始為了建立第一張照片，也就是最上面的那張。我們只需要添加一個(gè)，里面包含照片的。就這么多，剩下的效果都是通過來實(shí)現(xiàn)的。我們可以用的偽類來實(shí)現(xiàn)。此時(shí)效果相差甚遠(yuǎn)完善這不是我們想要的效果。
實(shí)現(xiàn)效果 步驟
1.初始index.html
為了建立第一張照片，也就是最上面的那張。我們只需要添加一個(gè)div，里面包含照片的img。就這么多，剩下的效果都是通過CSS來實(shí)現(xiàn)的。確保div的class為stackone。
Photo Stack 
初始的效果如下：
2.The First Pseudo Element
現(xiàn)在我們添加一層底片。我們想得到的效果是：底層圖片看上去好像是在頂層照片下面。我們可以用CSS的偽類:before來實(shí)現(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);
}
此時(shí)效果相差甚遠(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);
}
此時(shí)效果正常，初見端倪
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);
}
最后大功告成，具有層次感：
本篇文章遷移自本人于2014年12月29日 16:38:48在CSDN的博客《css實(shí)現(xiàn)照片堆疊效果》
源博客參考翻譯自《Use Pseudo Elements to Create an Image Stack Illusion》
Github項(xiàng)目源碼
轉(zhuǎn)載請注明出處，謝謝。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/116261.html
摘要：設(shè)計(jì)思想兼容已有內(nèi)容避免不必要的復(fù)雜性解決現(xiàn)實(shí)問題優(yōu)雅降級尊重事實(shí)標(biāo)準(zhǔn)變化新增語義化標(biāo)簽去除純表示性的標(biāo)簽拖拽離線語法標(biāo)簽不區(qū)分大小寫推薦小寫空標(biāo)簽可以不閉合屬性不必引號。遇到這種情況時(shí)，會生成匿名塊級盒來包含行級盒。 瀏覽器 瀏覽器 渲染引擎 JavaScript引擎 IE Trident JScript Edge EdgeHTML Chakra Safari We...
摘要：設(shè)計(jì)思想兼容已有內(nèi)容避免不必要的復(fù)雜性解決現(xiàn)實(shí)問題優(yōu)雅降級尊重事實(shí)標(biāo)準(zhǔn)變化新增語義化標(biāo)簽去除純表示性的標(biāo)簽拖拽離線語法標(biāo)簽不區(qū)分大小寫推薦小寫空標(biāo)簽可以不閉合屬性不必引號。遇到這種情況時(shí)，會生成匿名塊級盒來包含行級盒。 瀏覽器 瀏覽器 渲染引擎 JavaScript引擎 IE Trident JScript Edge EdgeHTML Chakra Safari We...
閱讀 1026·2021-11-22 13:52
閱讀 941·2019-08-30 15:44
閱讀 581·2019-08-30 15:43
閱讀 2437·2019-08-30 12:52
閱讀 3486·2019-08-29 16:16
閱讀 647·2019-08-29 13:05
閱讀 2952·2019-08-26 18:36
閱讀 2007·2019-08-26 13:46
