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

輕質水扭曲效果

Ksenia Kondrashova 使用帶有水效果的漂亮著色器創建了一個演示。它看起來很逼真，就像游泳池裡的水一樣。感覺平靜且催眠。

---

懸停時的 3D 視差效果

Temani Afif 使用單一影像標籤創造令人驚嘆的效果。這是一個很好的例子：一個 HTML 標籤創建了驚人的 3D 效果…而且程式碼非常簡單！該演示只需要 18 行 CSS！

---

懸停時選擇性飽和

另一個使用單一影像元素的很酷的示範。 Ana Tudor 使用 SVG 濾鏡套用顏色插值蒙版並根據顏色突出顯示圖片元素。

---

煩人的土豆

您需要打開揚聲器來觀看 Sophia Wood（又名 Fractal Kitty）的這個有趣的演示。點擊聲音按鈕或按 1-8 按鈕讓馬鈴薯說話……但要小心，這可能既有趣又煩人。

---

車輪圖庫（僅限 CSS）

由 Chris Bolson 創作的動畫圓形畫廊。將滑鼠懸停在圖片上並查看它們的動畫。我喜歡標題與照片運動一起顯示的方式。光滑。

---

點彩派 NASA 圖像

Sophia Wood 的另一個示範。她用P5生成無限生成的點。每個週期它們的尺寸都會變小，展現出一幅太空圖。像往常一樣，藝術與代碼的創造性結合。

---

顏色對比檢查表

這更像是一個「書呆子」輔助功能演示：一個包含所有 CSS 顏色名稱及其顏色對比組合的網格。 Dave Rupert 使用 WCAG 2.1 規格來確定結果。

---

我的院子標誌

Chris Coyier 複製了這個標誌性標誌，應用滾動驅動的動畫來讓所有行動態調整（文字可編輯）其字體，以便所有行佔據相同的寬度。因為它使用animation-range屬性，所以這個演示只能在Chrome上運行。

---

具有滾動捕捉事件的滾動驅動動畫卡堆疊

Paul Noble 創建了一個令人驚嘆的卡片堆棧，將滾動驅動​​的動畫與滾動捕捉事件相結合。您必須使用觸控板（此演示無法使用滑鼠）才能享受美妙的過渡。

---

快速雙倍進步

Ana Tudor 的另一個演示。程式碼乾淨、簡短且語義化。我喜歡這個組件的設計（來自 Reddit 問題？）並且可以看到自己在某些項目中使用類似的東西。

---

---

如果您喜歡此列表，請查看上個月的演示！

以上是酷炫的 CodePen 演示（10 月 4 日）的詳細內容。更多資訊請關注PHP中文網其他相關文章！