CSS 中的《疯狂杂志》折叠效果

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您的旅程各个阶段提供云产品。立即开始使用 $200 免费信用额度!

这始终是我在《疯狂杂志》中最喜欢的东西。其中一页(我认为是封底的内页)上覆盖着疯狂的插图。你把那页纸三折,盖住图像的中间三分之一,就会出现一张新的图像,因为插图是设计为与这些折痕完美对齐的。新图像(和文字!)是笑话的一部分。

每一个都是一个巧妙的技巧,所以当然,我很高兴看到这个技巧出现在 CSS 中,感谢 Thomas Park.

我非常惊讶 Thomas 能够用一个状态(:hover / :active)来实现它。我本以为它需要 @keyframes 来在动画过程中将 3D 变换调整到不同的位置,但看起来多个过渡(父元素和子元素)都在处理这个问题。


如果你想尝试其他酷炫的 CSS 纸张效果…

这是 Lynn Fisher 的一个新的效果

Mandy Michael 的经典作品

更多 Mattia Astorino 的折叠效果

直接链接 →