CSS 视觉错觉

Source: Dev.to

在过去的一周里，我仅使用 CSS（其中一个用了少量 HTML）编写了一系列光学幻觉。我创建了一个包含 40 个作品的 CodePen 集合，未来几周可能会继续增加。

许多演示会玩转颜色效果，有的带有动画，而且大多数都加入了运动警示——虽然我可能需要再添加更多警示。编写其中一些时，我真的感到头晕 😬

收藏

Mainz‑Linez 幻觉

这个动画演示在更窄或更大的屏幕上效果更佳。先聚焦红点，观察它们上下移动；然后把注意力转向任意一个黑色十字，红点就会呈波浪状运动！

在这个以及下一个幻觉中，我使用了 @afif 提供的 超级巧妙的波形生成器。

曲率盲点

一组几乎相同的曲线仅在颜色上有所区别。从拐点到拐点或从峰值到峰值观看时，它们会呈现完全不同的视觉效果——甚至会让其中一条看起来根本不像波形。（在小屏幕上效果更好。）

灰色圆圈

你看到的是红、蓝、绿球体吗？它们其实全都是灰色的。将鼠标悬停在演示上即可显现真实颜色。重叠的原色会欺骗大脑“填充”出这些颜色的圆圈。最初我把线条画得太高，导致效果消失，最终的结果已经很好。

灰色条形

两侧的列和中间的线条共享完全相同的平面灰色调——线条本身没有渐变，只有背景有渐变。这个演示既容易观看，也容易实现。

呼吸方块

另一个需要在 CodePen 上观看的动画作品。蓝色方块看起来在脉动或“呼吸”——不断放大和收缩，但实际上它的尺寸始终不变，只是旋转。将鼠标悬停即可揭示技巧。

像这五个一样，还有 35 个其他作品。 快来看看吧！ 希望你喜欢它们，我将在接下来的几周里继续添加新作品。