Temani Afif 通常会与 CSS 演示一起出现在这个列表中。这次，因为一些令人印象深刻的事情：将自定义属性与 at-property 和三角函数相结合，他可以显示屏幕的高度和宽度......没有任何 JavaScript！
将鼠标悬停在这些可爱的斑点上，可以看到它们的反应和移动（甚至比它们已经做的更多）。这是 Ksenia Kondrashova 的一个有趣的 WebGL 演示，可以用作网站上的交互式（和分散注意力的）背景。
如果您喜欢电影台词和快节奏的刽子手游戏，Alexandre Vacassin 的这个演示适合您：通过单击字母来猜测电影台词（据我所知，没有键盘选项）。但要小心：你将有一分钟的时间来完成任务，每次失败的尝试都会减少 5 秒。
另一款游戏，这次是 ZIM 的。这个三维迷宫是用 ThreeJS 创建的，形状像一个环形。在这个为 CodePen 挑战编写的有趣演示中，球将跟随鼠标在迷宫中行走（有时可能具有挑战性）。
Veronica Hristova 编写了这个交互式导航。它使用 ::before 和 ::after 伪元素来复制数据属性中指定的文本，并在悬停时生成彩色 3D 效果。简单又酷。
这是 Ksenia Kondrashova 的另一个演示。围绕这个苹果旋转，它在旋转时流畅地移动，失去形状并重新获得新形状 - ThreeJS 的一个很好的实验。
受到 Dribbble 上发现的设计（在 codepen 描述中链接）的启发，Dilum Sanjaya 使用 React 和 Tailwind 编写了该账单分割器的实时版本。看起来很整齐。
最近这个系列中的 CSS 艺术很少，而 Alina 绘制的这幅美丽的麻雀画是一次非凡的回归。基于 Behance 的绘图（在代码中链接），代码的简单性与绘图的简洁性形成鲜明对比。很棒的工作。
在屏幕上移动鼠标，看看这个生物/斑点如何跟随它。最初附着在顶部，这种蠕虫（？水蛭？生物！）将在移动时分离并生长。 Liam Egan 开发了这个演示。
Josetxu 编写的 3D CSS 游戏。虽然 Jenga 不完全可玩，但您可以单击中间的棋子，它会动画并移动（然后您可以在“反向 Jenga”中将它们推回内部）。
如果您喜欢这些演示，请查看上一篇文章，其中包含 2024 年 6 月的 10 个酷炫 CodePen 演示！
以上是酷炫的 CodePen 演示（7 月 4 日）的详细内容。更多信息请关注PHP中文网其他相关文章！
