酷炫的 CodePen 演示（7 月 4 日）
- WBOY原创
- 2024-08-07 13:40:43768浏览
屏幕宽度/高度（仅 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中文网其他相关文章！