Ksenia Kondrashova 使用帶有水效果的漂亮著色器創建了一個演示。它看起來很逼真，就像游泳池裡的水一樣。感覺平靜且催眠。
Temani Afif 使用單一影像標籤創造令人驚嘆的效果。這是一個很好的例子：一個 HTML 標籤創建了驚人的 3D 效果…而且程式碼非常簡單！該演示只需要 18 行 CSS！
另一個使用單一影像元素的很酷的示範。 Ana Tudor 使用 SVG 濾鏡套用顏色插值蒙版並根據顏色突出顯示圖片元素。
您需要打開揚聲器來觀看 Sophia Wood（又名 Fractal Kitty）的這個有趣的演示。點擊聲音按鈕或按 1-8 按鈕讓馬鈴薯說話……但要小心，這可能既有趣又煩人。
由 Chris Bolson 創作的動畫圓形畫廊。將滑鼠懸停在圖片上並查看它們的動畫。我喜歡標題與照片運動一起顯示的方式。光滑。
Sophia Wood 的另一個示範。她用P5生成無限生成的點。每個週期它們的尺寸都會變小，展現出一幅太空圖。像往常一樣，藝術與代碼的創造性結合。
這更像是一個「書呆子」輔助功能演示：一個包含所有 CSS 顏色名稱及其顏色對比組合的網格。 Dave Rupert 使用 WCAG 2.1 規格來確定結果。
Chris Coyier 複製了這個標誌性標誌，應用滾動驅動的動畫來讓所有行動態調整（文字可編輯）其字體，以便所有行佔據相同的寬度。因為它使用animation-range屬性，所以這個演示只能在Chrome上運行。
Paul Noble 創建了一個令人驚嘆的卡片堆棧，將滾動驅動的動畫與滾動捕捉事件相結合。您必須使用觸控板（此演示無法使用滑鼠）才能享受美妙的過渡。
Ana Tudor 的另一個演示。程式碼乾淨、簡短且語義化。我喜歡這個組件的設計（來自 Reddit 問題？）並且可以看到自己在某些項目中使用類似的東西。
如果您喜歡此列表，請查看上個月的演示！
以上是酷炫的 CodePen 演示（10 月 4 日）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
