酷炫的 CodePen 演示（10 月 4 日）

轻质水扭曲效果

Ksenia Kondrashova 使用带有水效果的漂亮着色器创建了一个演示。它看起来很逼真，就像游泳池里的水一样。感觉平静且催眠。

---

悬停时的 3D 视差效果

Temani Afif 使用单个图像标签创建令人惊叹的效果。这是一个很好的例子：一个 HTML 标签创建了惊人的 3D 效果……而且代码非常简单！该演示只需要 18 行 CSS！

---

悬停时选择性饱和

另一个使用单个图像元素的很酷的演示。 Ana Tudor 使用 SVG 滤镜应用颜色插值蒙版并根据颜色突出显示图片元素。

---

烦人的土豆

您需要打开扬声器来观看 Sophia Wood（又名 Fractal Kitty）的这个有趣的演示。单击声音按钮或按 1-8 按钮让土豆说话……但要小心，这可能既有趣又烦人。

---

车轮画廊（仅限 CSS）

由 Chris Bolson 创建的动画圆形画廊。将鼠标悬停在图片上并查看它们的动画。我喜欢标题与照片运动一起显示的方式。光滑。

---

点彩派 NASA 图像

Sophia Wood 的另一个演示。她用P5生成无限生成的点。每个周期它们的尺寸都会变小，展现出一幅太空图片。像往常一样，艺术与代码的创造性结合。

---

颜色对比检查表

这更像是一个“书呆子”辅助功能演示：一个包含所有 CSS 颜色名称及其颜色对比组合的网格。 Dave Rupert 使用 WCAG 2.1 规范来确定结果。

---

我的院子标志

Chris Coyier 复制了这个标志性标志，应用滚动驱动的动画来让所有行动态调整（文本可编辑）其字体，以便所有行占据相同的宽度。因为它使用animation-range属性，所以这个演示只能在Chrome上运行。

---

具有滚动捕捉事件的滚动驱动动画卡堆栈

Paul Noble 创建了一个令人惊叹的卡片堆栈，将滚动驱动的动画与滚动捕捉事件相结合。您必须使用触控板（此演示无法使用鼠标）才能享受美妙的过渡。

---

快速双倍进步

Ana Tudor 的另一个演示。代码干净、简短且语义化。我喜欢这个组件的设计（来自 Reddit 问题？）并且可以看到自己在某些项目中使用类似的东西。

---

---

如果您喜欢此列表，请查看上个月的演示！

以上是酷炫的 CodePen 演示（10 月 4 日）的详细内容。更多信息请关注PHP中文网其他相关文章！