本文主要介紹了純CSS雜志封面折疊效果，分享給大家，具體如下：

如圖所示，這是一個(gè)雜志封面圖的折疊效果，折疊前后的圖片內(nèi)容完全不違和，瞬間對(duì)這個(gè)圖片內(nèi)容的排版設(shè)計(jì)很是稱贊，但這塊不再本次文章的討論范圍，本次文章是要用純CSS實(shí)現(xiàn)這個(gè)折疊效果。

按圖片的效果進(jìn)行代碼還原很多方式都可以實(shí)現(xiàn)，以下是本次實(shí)現(xiàn)的主要幾點(diǎn)：

• 純CSS實(shí)現(xiàn)，不依賴JavaScript
• 使用單張圖片，不需要在PS中切割成多單圖片
• 可以通過樣式屬性中設(shè)置CSS變量來配置頁面

實(shí)現(xiàn)過程

界面布局

HTML的實(shí)現(xiàn)相對(duì)簡單，img標(biāo)簽主要實(shí)現(xiàn)內(nèi)容大小的控制，將圖標(biāo)內(nèi)部的內(nèi)容分割為3個(gè)部分，其中左側(cè)span.a占50%，右側(cè) span.bc占50%，span.bc中的 span.b 和 span.c 各占比一半。圖片的地址從HTML中可傳入，這樣需要更換圖片的時(shí)候就不需要更新CSS中的代碼了。

<span class="jaffee" style="--bg: url('path/to/image.png');">
  <span class="a"></span>
  <span class="bc">
    <span class="b"></span>
    <span class="c"></span>
  </span>
  <img src="path/to/image.png">
</span>

你可能會(huì)好奇圖片為什么被隱藏了，核心的邏輯就是對(duì)不同的分割塊中設(shè)置不同的 background-position，每一塊都是用的同一個(gè)圖片地址，但是真正顯示的區(qū)域不一樣，拼在一起剛好是一張完整的圖片。當(dāng)hover時(shí)對(duì) span.b 和 span.c設(shè)置不同的動(dòng)畫效果，接下來看核心的代碼實(shí)現(xiàn)。

上面有提到img標(biāo)簽主要實(shí)現(xiàn)內(nèi)容大小的控制，所有img標(biāo)簽的目的是撐開內(nèi)容的大小，但是本身是不展示在頁面中的，所以img標(biāo)簽有一個(gè)特殊的樣式控制opacity: 0，隱藏其透明度。這樣我們就可以靈活的操作span分割出來的背景了。

img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 56vh;
  opacity: 0;
}

接下來設(shè)置abc三個(gè)區(qū)域的尺寸：

.jaffee .a {
  position: absolute;
  left: 0;
  width: 50%;
  background-position: 0 0;
}
.jaffee .bc {
  position: absolute;
  width: 50%;
  height: 100%;
  left: 50%;
}
.jaffee .b,
.jaffee .c {
  position: relative;
  width: 50%;
}

bc區(qū)域會(huì)涉及到3d動(dòng)畫，進(jìn)一步增加相關(guān)css屬性：

.jaffee .bc {
  transform-origin: left;
  transition: transform 3s;
  transform-style: preserve-3d;
}

然后對(duì)不同的區(qū)域背景圖片設(shè)置不同的 background-position，a區(qū)域在最左側(cè)且無相關(guān)動(dòng)畫展示，所以不需要設(shè)置：

.jaffee .b {
  background-position: 66.666667% 0;
  transform-style: preserve-3d;
}
.jaffee .c {
  background-position: 100% 0;
  transform-origin: left;
}

為了讓效果更有3d的感覺，給最外層增加 perspective 透視，讓效果更逼真：

.jaffee-wrapper {
    perspective: 60em;
}

此時(shí)的界面效果：

動(dòng)畫實(shí)現(xiàn)

布局完成后接下來就是動(dòng)畫的實(shí)現(xiàn)過程了，動(dòng)畫看著有些復(fù)雜，其實(shí)仔細(xì)拆解一下并沒有那么復(fù)雜，仔細(xì)看動(dòng)畫的過程，只有bc區(qū)域有動(dòng)畫的過程。整個(gè)bc區(qū)域Y軸進(jìn)行了一次180deg的翻轉(zhuǎn)，bc區(qū)域的c區(qū)域本質(zhì)是沒有翻轉(zhuǎn)，但是因?yàn)楦讣?jí)的翻轉(zhuǎn)的原因需要進(jìn)行設(shè)置反向的值進(jìn)行抵消。另外可以發(fā)現(xiàn)c區(qū)域的動(dòng)畫結(jié)束時(shí)間要晚一些，說明兩者的動(dòng)畫執(zhí)行時(shí)間上有區(qū)別。

基于上述的核心代碼如下：

.jaffee:hover .bc,
.jaffee:active .bc {
  transform: rotateY(-180deg) ;
  transition: transform 2s;
}
.jaffee:hover .c,
.jaffee:active .c {
  transform: rotateY(180deg);
  transition: transform 3s;
}

增強(qiáng)陰影

為了讓效果更真實(shí)貼近現(xiàn)實(shí)，在折疊的時(shí)候增加了b區(qū)域背面的黑色陰影的實(shí)現(xiàn)，這個(gè)陰影的實(shí)現(xiàn)使用偽元素，代碼如下：

.jaffee .b:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  transform: rotateY(180deg) translateZ(1px);
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

這里可以看到對(duì)偽元素設(shè)置了translateZ(1px)，所以需要對(duì)剛剛設(shè)置的動(dòng)畫區(qū)域也增加相應(yīng)的translateZ，避免在動(dòng)畫過程中黑色陰影的覆蓋。增加后的代碼如下：

.jaffee:hover .bc,
.jaffee:active .bc {
  transform: rotateY(-180deg) translateZ(-1px);
}
.jaffee:hover .c,
.jaffee:active .c {
  transform: rotateY(180deg) translateZ(2px);
}

到此整個(gè)動(dòng)畫效果就實(shí)現(xiàn)完成了，最終的效果如下：

最后

本文解析了通過純 CSS 實(shí)現(xiàn)雜志封面折疊效果，拆解之后的實(shí)現(xiàn)過程相對(duì)就比較清晰了，主要使用了css 3d相關(guān)屬性。還可以用于各種其他場景，比如卡片翻轉(zhuǎn)、菜單展開等等，有興趣的朋友可以嘗試看看~

參考

The Mad Magazine Fold-In Effect in CSS：https://thomaspark.co/2020/06/the-mad-magazine-fold-in-effect-in-css/

到此這篇關(guān)于純CSS雜志封面折疊效果的文章就介紹到這了,更多相關(guān)CSS雜志折疊內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

最新評(píng)論