CSS實(shí)現(xiàn)照片堆疊效果

CKJOKER 發(fā)布于2019-08-30 15:44 / 931人閱讀

摘要：實(shí)現(xiàn)效果步驟初始為了建立第一張照片，也就是最上面的那張。我們只需要添加一個(gè)，里面包含照片的。就這么多，剩下的效果都是通過(guò)來(lái)實(shí)現(xiàn)的。我們可以用的偽類來(lái)實(shí)現(xiàn)。此時(shí)效果相差甚遠(yuǎn)完善這不是我們想要的效果。

實(shí)現(xiàn)效果

步驟

1.初始index.html
為了建立第一張照片，也就是最上面的那張。我們只需要添加一個(gè)div，里面包含照片的img。就這么多，剩下的效果都是通過(guò)CSS來(lái)實(shí)現(xiàn)的。確保div的class為stackone。





  
  
  
  Photo Stack

初始的效果如下：

2.The First Pseudo Element
現(xiàn)在我們添加一層底片。我們想得到的效果是：底層圖片看上去好像是在頂層照片下面。我們可以用CSS的偽類:before來(lái)實(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);
}

最后大功告成，具有層次感：

原創(chuàng)說(shuō)明

本篇文章遷移自本人于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)載請(qǐng)注明出處，謝謝。