2023 React 18 系統(tǒng)入門 進階實戰(zhàn)《歡樂購》

download：https://www.51xuebc.com/thread-589-1-1.html

這是一個雜志封面圖的折疊效果，折疊前后的圖片內(nèi)容完整不違和，霎時對這個圖片內(nèi)容的排版設(shè)計很是稱譽，但這塊不再本次文章的討論范圍，本次文章是要用純CSS完成這個折疊效果。

按圖片的效果停止代碼復原很多方式都能夠完成，以下是本次完成的主要幾點：

• 純CSS完成，不依賴JavaScript

• 運用單張圖片，不需求在PS中切割成多單圖片

• 能夠經(jīng)過款式屬性中設(shè)置CSS變量來配置頁面

完成過程

界面規(guī)劃

HTML的完成相對簡單，img標簽主要完成內(nèi)容大小的控制，將圖標內(nèi)部的內(nèi)容分割為3個局部，其中左側(cè)span.a占50%，右側(cè)?span.bc占50%，span.bc中的?span.b?和?span.c?各占比一半。圖片的地址從HTML中可傳入，這樣需求改換圖片的時分就不需求更新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>

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

上面有提到img標簽主要完成內(nèi)容大小的控制，一切img標簽的目的是撐開內(nèi)容的大小，但是自身是不展現(xiàn)在頁面中的，所以img標簽有一個特殊的款式控制opacity: 0，躲藏其透明度。這樣我們就能夠靈敏的操作span分割出來的背景了。

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

接下來設(shè)置abc三個區(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ū)域會觸及到3d動畫，進一步增加相關(guān)css屬性：

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

然后對不同的區(qū)域背景圖片設(shè)置不同的?background-position，a區(qū)域在最左側(cè)且無相關(guān)動畫展現(xiàn)，所以不需求設(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; }

此時的界面效果：

動畫完成

規(guī)劃完成后接下來就是動畫的完成過程了，動畫看著有些復雜，其實認真拆解一下并沒有那么復雜，認真看動畫的過程，只要bc區(qū)域有動畫的過程。整個bc區(qū)域Y軸停止了一次180deg的翻轉(zhuǎn)，bc區(qū)域的c區(qū)域?qū)嵸|(zhì)是沒有翻轉(zhuǎn)，但是由于父級的翻轉(zhuǎn)的緣由需求停止設(shè)置反向的值停止抵消。另外能夠發(fā)現(xiàn)c區(qū)域的動畫完畢時間要晚一些，闡明兩者的動畫執(zhí)行時間上有區(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; }

加強陰影

為了讓效果更真實貼近理想，在折疊的時分增加了b區(qū)域反面的黑色陰影的完成，這個陰影的完成運用偽元素，代碼如下：

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

這里能夠看到對偽元素設(shè)置了translateZ(1px)，所以需求對剛剛設(shè)置的動畫區(qū)域也增加相應(yīng)的translateZ，防止在動畫過程中黑色陰影的掩蓋。增加后的代碼如下：

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

到此整個動畫效果就完成完成了，最終的效果如下：

最后

本文解析了經(jīng)過純 CSS 完成雜志封面折疊效果，拆解之后的完成過程相對就比擬明晰了，主要運用了css 3d相關(guān)屬性。還能夠用于各種其他場景，比方卡片翻轉(zhuǎn)、菜單展開等等，有興味的朋友能夠嘗試看看~