資訊專欄INFORMATION COLUMN
摘要：實現效果步驟初始為了建立第一張照片，也就是最上面的那張。我們只需要添加一個，里面包含照片的。就這么多，剩下的效果都是通過來實現的。我們可以用的偽類來實現。此時效果相差甚遠完善這不是我們想要的效果。
實現效果 步驟
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);
}
最后大功告成，具有層次感：
本篇文章遷移自本人于2014年12月29日 16:38:48在CSDN的博客《css實現照片堆疊效果》
源博客參考翻譯自《Use Pseudo Elements to Create an Image Stack Illusion》
Github項目源碼
轉載請注明出處，謝謝。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116261.html
摘要：設計思想兼容已有內容避免不必要的復雜性解決現實問題優雅降級尊重事實標準變化新增語義化標簽去除純表示性的標簽拖拽離線語法標簽不區分大小寫推薦小寫空標簽可以不閉合屬性不必引號。遇到這種情況時，會生成匿名塊級盒來包含行級盒。 瀏覽器 瀏覽器 渲染引擎 JavaScript引擎 IE Trident JScript Edge EdgeHTML Chakra Safari We...
摘要：設計思想兼容已有內容避免不必要的復雜性解決現實問題優雅降級尊重事實標準變化新增語義化標簽去除純表示性的標簽拖拽離線語法標簽不區分大小寫推薦小寫空標簽可以不閉合屬性不必引號。遇到這種情況時，會生成匿名塊級盒來包含行級盒。 瀏覽器 瀏覽器 渲染引擎 JavaScript引擎 IE Trident JScript Edge EdgeHTML Chakra Safari We...
閱讀 1010·2021-11-22 13:52
閱讀 924·2019-08-30 15:44
閱讀 569·2019-08-30 15:43
閱讀 2423·2019-08-30 12:52
閱讀 3472·2019-08-29 16:16
閱讀 636·2019-08-29 13:05
閱讀 2942·2019-08-26 18:36
閱讀 1974·2019-08-26 13:46
