屏幕宽度/高度（仅 CSS）

Temani Afif 通常与 CSS 演示一起出现在这个列表中。这次，因为一些令人印象深刻的事情：将自定义属性与 at-property 和三角函数相结合，他可以显示屏幕的高度和宽度......没有任何 JavaScript！

WebGL 交互式 Blob

将鼠标悬停在这些可爱的斑点上，可以看到它们的反应和移动（甚至比它们已经做的更多）。这是 Ksenia Kondrashova 的一个有趣的 WebGL 演示，可以用作网站上的交互式（和分散注意力的）背景。

电影台词黑客

如果您喜欢电影台词和快节奏的刽子手游戏，Alexandre Vacassin 的这个演示适合您：通过单击字母来猜测电影台词（据我所知，没有键盘选项）。但要小心：你将有一分钟的时间来完成任务，每次失败的尝试都会减少 5 秒。

环形迷宫

又一款游戏，这次是 ZIM 的。这个三维迷宫是用 ThreeJS 创建的，形状像一个环形。在这个为 CodePen 挑战编写的有趣演示中，球将跟随鼠标在迷宫中行走（有时可能具有挑战性）。

导航悬停效果

Veronica Hristova 编写了此交互式导航。它使用 ::before 和 ::after 伪元素来复制数据属性中指定的文本，并在悬停时生成彩色 3D 效果。简单又酷。

三.Js 布洛比苹果

这是 Ksenia Kondrashova 的另一个演示。围绕这个苹果旋转，它在旋转时流畅地移动，失去形状并重新获得新的形状 - 这是 ThreeJS 的一个很好的实验。

账单分割应用程序

受到 Dribbble 上发现的设计（在 codepen 描述中链接）的启发，Dilum Sanjaya 使用 React 和 Tailwind 编写了这个账单分割器的实时版本。看起来很整洁。

麻雀

这个系列最近很少有 CSS 艺术，Alina 绘制的这幅美丽的麻雀画是一次非凡的回归。基于 Behance 的绘图（在代码中链接），代码的简单性与绘图的简洁性形成鲜明对比。了不起的工作。

IK 泻湖的生物

在屏幕上移动鼠标，看看这个生物/斑点如何跟随它。最初附着在顶部，这种蠕虫（？水蛭？生物！）将在移动时分离并生长。 Liam Egan 开发了这个演示。

3D Jenga — CSS

Josetxu 编写的 3D CSS 游戏。虽然 Jenga 不完全可玩，但您可以单击中间的棋子，它会动画并移动（然后您可以在“反向 Jenga”中将它们推回内部）。

如果您喜欢这些演示，请查看上一篇文章，其中包含 2024 年 6 月的 10 个酷炫 CodePen 演示！