酷炫的 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中文網其他相關文章！