Ksenia Kondrashova 使用带有水效果的漂亮着色器创建了一个演示。它看起来很逼真，就像游泳池里的水一样。感觉平静且催眠。
Temani Afif 使用单个图像标签创建令人惊叹的效果。这是一个很好的例子：一个 HTML 标签创建了惊人的 3D 效果……而且代码非常简单！该演示只需要 18 行 CSS！
另一个使用单个图像元素的很酷的演示。 Ana Tudor 使用 SVG 滤镜应用颜色插值蒙版并根据颜色突出显示图片元素。
您需要打开扬声器来观看 Sophia Wood（又名 Fractal Kitty）的这个有趣的演示。单击声音按钮或按 1-8 按钮让土豆说话……但要小心，这可能既有趣又烦人。
由 Chris Bolson 创建的动画圆形画廊。将鼠标悬停在图片上并查看它们的动画。我喜欢标题与照片运动一起显示的方式。光滑。
Sophia Wood 的另一个演示。她用P5生成无限生成的点。每个周期它们的尺寸都会变小，展现出一幅太空图片。像往常一样，艺术与代码的创造性结合。
这更像是一个“书呆子”辅助功能演示：一个包含所有 CSS 颜色名称及其颜色对比组合的网格。 Dave Rupert 使用 WCAG 2.1 规范来确定结果。
Chris Coyier 复制了这个标志性标志，应用滚动驱动的动画来让所有行动态调整（文本可编辑）其字体，以便所有行占据相同的宽度。因为它使用animation-range属性，所以这个演示只能在Chrome上运行。
Paul Noble 创建了一个令人惊叹的卡片堆栈，将滚动驱动的动画与滚动捕捉事件相结合。您必须使用触控板（此演示无法使用鼠标）才能享受美妙的过渡。
Ana Tudor 的另一个演示。代码干净、简短且语义化。我喜欢这个组件的设计（来自 Reddit 问题？）并且可以看到自己在某些项目中使用类似的东西。
如果您喜欢此列表，请查看上个月的演示！
以上是酷炫的 CodePen 演示（10 月 4 日）的详细内容。更多信息请关注PHP中文网其他相关文章！
