纯 CSS 杂志封面折叠效果
如图所示，这是一个杂志封面图的折叠效果，折叠前后的图片内容完全不违和，瞬间对这个图片内容的排版设计很是称赞，但这块不再本次文章的讨论范围，本次文章是要用纯 CSS 实现这个折叠效果。
按图片的效果进行代码还原很多方式都可以实现，以下是本次实现的主要几点：
纯 CSS 实现，不依赖 JavaScript
使用单张图片，不需要在 PS 中切割成多单图片
可以通过样式属性中设置 CSS 变量来配置页面
实现过程
界面布局
HTML的实现相对简单，img标签主要实现内容大小的控制，将图标内部的内容分割为 3 个部分，其中左侧span.a占 50%，右侧 span.bc占 50%，span.bc中的 span.b 和 span.c 各占比一半。图片的地址从HTML中可传入，这样需要更换图片的时候就不需要更新 CSS 中的代码了。
你可能会好奇图片为什么被隐藏了，核心的逻辑就是对不同的分割块中设置不同的 background-position，每一块都是用的同一个图片地址，但是真正显示的区域不一样，拼在一起刚好是一张完整的图片。当hover时对 span.b 和 span.c设置不同的动画效果，接下来看核心的代码实现。
上面有提到img标签主要实现内容大小的控制，所有img标签的目的是撑开内容的大小，但是本身是不展示在页面中的，所以img标签有一个特殊的样式控制opacity: 0，隐藏其透明度。这样我们就可以灵活的操作span分割出来的背景了。
接下来设置 abc 三个区域的尺寸：
bc 区域会涉及到 3d 动画，进一步增加相关 css 属性：
然后对不同的区域背景图片设置不同的 background-position，a 区域在最左侧且无相关动画展示，所以不需要设置：
为了让效果更有 3d 的感觉，给最外层增加 perspective 透视，让效果更逼真：
此时的界面效果：
动画实现
布局完成后接下来就是动画的实现过程了，动画看着有些复杂，其实仔细拆解一下并没有那么复杂，仔细看动画的过程，只有 bc 区域有动画的过程。整个 bc 区域 Y 轴进行了一次180deg的翻转，bc 区域的 c 区域本质是没有翻转，但是因为父级的翻转的原因需要进行设置反向的值进行抵消。另外可以发现 c 区域的动画结束时间要晚一些，说明两者的动画执行时间上有区别。
基于上述的核心代码如下：
增强阴影
为了让效果更真实贴近现实，在折叠的时候增加了 b 区域背面的黑色阴影的实现，这个阴影的实现使用伪元素，代码如下：
这里可以看到对伪元素设置了translateZ(1px)，所以需要对刚刚设置的动画区域也增加相应的translateZ，避免在动画过程中黑色阴影的覆盖。增加后的代码如下：
到此整个动画效果就实现完成了，最终的效果如下：
在线预览
码上掘金地址：https://code.juejin.cn/pen/7271095662643511351
最后
本文解析了通过纯 CSS 实现杂志封面折叠效果，拆解之后的实现过程相对就比较清晰了，主要使用了 css 3d 相关属性。还可以用于各种其他场景，比如卡片翻转、菜单展开等等，有兴趣的朋友可以尝试看看~
看完本文如果觉得有用，记得点个赞支持，收藏起来说不定哪天就用上啦～
专注前端开发，分享前端相关技术干货，公众号：南城大前端（ID: nanchengfe）
参考
The Mad Magazine Fold-In Effect in CSS：https://thomaspark.co/2020/06/the-mad-magazine-fold-in-effect-in-css/
版权声明: 本文为 InfoQ 作者【南城FE】的原创文章。
原文链接:【http://xie.infoq.cn/article/5bd4d15463c771e3d18209f04】。文章转载请联系作者。
还未添加个人签名 2019-02-12 加入
专注前端开发，分享前端知识
评论