2023 React 18 系统入门 进阶实战《欢乐购》

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

这是一个杂志封面图的折叠效果，折叠前后的图片内容完整不违和，霎时对这个图片内容的排版设计很是称誉，但这块不再本次文章的讨论范围，本次文章是要用纯CSS完成这个折叠效果。

按图片的效果停止代码复原很多方式都能够完成，以下是本次完成的主要几点：

• 纯CSS完成，不依赖JavaScript

• 运用单张图片，不需求在PS中切割成多单图片

• 能够经过款式属性中设置CSS变量来配置页面

完成过程

界面规划

HTML的完成相对简单，img标签主要完成内容大小的控制，将图标内部的内容分割为3个局部，其中左侧span.a占50%，右侧 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>

你可能会猎奇图片为什么被躲藏了，中心的逻辑就是对不同的分割块中设置不同的 background-position，每一块都是用的同一个图片地址，但是真正显现的区域不一样，拼在一同刚好是一张完好的图片。当hover时对 span.b 和 span.c设置不同的动画效果，接下来看中心的代码完成。

上面有提到img标签主要完成内容大小的控制，一切img标签的目的是撑开内容的大小，但是自身是不展现在页面中的，所以img标签有一个特殊的款式控制opacity: 0，躲藏其透明度。这样我们就能够灵敏的操作span分割出来的背景了。

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

接下来设置abc三个区域的尺寸：

.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区域会触及到3d动画，进一步增加相关css属性：

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

然后对不同的区域背景图片设置不同的 background-position，a区域在最左侧且无相关动画展现，所以不需求设置：

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

此时的界面效果：

动画完成

规划完成后接下来就是动画的完成过程了，动画看着有些复杂，其实认真拆解一下并没有那么复杂，认真看动画的过程，只要bc区域有动画的过程。整个bc区域Y轴停止了一次180deg的翻转，bc区域的c区域实质是没有翻转，但是由于父级的翻转的缘由需求停止设置反向的值停止抵消。另外能够发现c区域的动画完毕时间要晚一些，阐明两者的动画执行时间上有区别。

基于上述的中心代码如下：

.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区域反面的黑色阴影的完成，这个阴影的完成运用伪元素，代码如下：

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

这里能够看到对伪元素设置了translateZ(1px)，所以需求对刚刚设置的动画区域也增加相应的translateZ，防止在动画过程中黑色阴影的掩盖。增加后的代码如下：

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

到此整个动画效果就完成完成了，最终的效果如下：

最后

本文解析了经过纯 CSS 完成杂志封面折叠效果，拆解之后的完成过程相对就比拟明晰了，主要运用了css 3d相关属性。还能够用于各种其他场景，比方卡片翻转、菜单展开等等，有兴味的朋友能够尝试看看~