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

屏幕宽度/高度（仅 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 演示！

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