酷炫的 CodePen 演示（7 月 4 日）
- WBOY原創
- 2024-08-07 13:40:43679瀏覽
螢幕寬度/高度（僅 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中文網其他相關文章！