CodePen 10個新 demo 上線

上個月 CodePen 社區提交了超過 4.2 萬個前端實驗，編輯部篩了 3 輪，最后這 10 個值得你看第二眼。不是那種"用 CSS 畫個蘋果 Logo"的入門作業，而是有人真的把瀏覽器特性玩出了新邊界。

01 | 下拉菜單終于不像 1998 年的了

Chris Bolson 寫了一個自定義選擇器，交互順滑到不像原生 HTML。沒有默認的灰色邊框，沒有點擊后的生硬跳轉，整個流程像滑冰塊一樣干凈。你在手機上試完會愣一下：原來這功能可以不做成"系統彈窗綁架用戶"。

Temani Afif 走了另一條路。他的版本讓你射水果來做選擇——字面意義上的"射"，水果爆炸后選項才落定。兩個 demo 放在一起看很有意思：同一個技術問題，有人解得像蘋果專賣店，有人解得像游戲廳。

前端組件的審美分野，往往不在代碼復雜度，而在產品經理敢不敢讓用戶多等 0.3 秒看一個動畫。

02 | Safari 團隊偷偷埋的彩蛋

Jen Simmons 在 WebKit 團隊做了件事：她給 feComposite 元素寫了一個可視化 demo。這個 SVG 濾鏡屬性 Safari 最近才支持，作用是控制圖形怎么互相疊加——沒有它，那些發光圓圈的邊緣會糊成一片。

demo 本身是個技術說明書，但 Simmons 把它做成了可以調參數的玩具。你拖動滑塊看光暈怎么變化，比讀 MDN 文檔快十倍理解原理。瀏覽器廠商的人親自下場寫例子，這事本身比功能上線更值得注意。

03 | 數據表格的古老難題有新解

做過后臺系統的都懂：表格行數過萬時，表頭滾動后消失，用戶就迷失了。以前解法是寫一堆 JavaScript 監聽 scroll 事件，性能差還容易出 bug。

Bramus 在 Chrome Canary 里挖到一個新特性，原生支持 sticky 行列的聲明式語法。demo 直接扔了一個 5000 行的模擬數據表，滾動時首列和表頭釘死不動，幀率穩在 60。代碼量從原來的 80 行降到 6 行。

瀏覽器原生能力每吃掉一個常用 polyfill，就有幾百個前端工程師能從兼容性泥潭里爬出來。

04 | CSS 開始長" if 語句"了

Rob 寫了一份關于 CSS if() 函數的完整教程。這功能允許你在樣式表里寫內聯條件判斷，以前必須預處理工具或 JavaScript 介入的事，現在純 CSS 能跑通。

教程結構很產品經理：先給場景，再給代碼，最后留了三道測試題。做完題你會發現，自己剛才寫的"條件樣式"在腦子里已經轉成了變量思維——這種認知遷移比學會語法更重要。

05 | 那些"沒必要但好看"的東西

Ben Evans 用純 HTML 和 CSS 搭了一臺可交互的老式電視機。旋鈕能轉，頻道能切，連雪花噪點都是 CSS 動畫。每次他發新作品，評論區都有人問"這有什么實際用途"， Evans 從不回復。

Margarita 的彩帶動畫是另一個極端。基于 P5.js，頂部有一排滑塊控制顏色、速度、密度。你調參數的過程，等于在上手一門編程語言的繪圖 API。學習曲線被藏在了"玩"里面。

Many Nicole 的 SVG 色塊實驗用了兩個新特性：相對顏色（讓 hue 可以算出來）和 sibling-index()（選中同級的第幾個）。代碼行數不多，但組合起來能實現以前要寫循環才能做的漸變效果。

06 | 滾動動畫的另一種玩法

Cyd Stumpel 的 demo 標題就叫 "Crazy Zoom"。不是傳統的視差滾動，而是把 scale 變換綁在滾動進度上，產生類似鏡頭推近的壓迫感。頁面往下滾，元素迎面撲來，像地鐵進站時看對面軌道。

技術實現用了 scroll-driven animations，Chrome 105+ 支持。Stumpel 在備注里寫了一句："我可能會偷這個思路用在真實項目里"——好的 demo 作者從不假裝自己的靈感憑空產生。

07 | 一個關于對抗的代碼挑戰

CodePen 每月有主題挑戰，3 月是 "Opposite Directions"。Shivani 的參賽作品是兩隊小人（青色 vs 品紅）從對角沖向中心，碰撞后彈回，循環往復。

沒有游戲機制，沒有得分系統，但你會忍不住盯著看哪邊先突破。這種"無目的性交互"在前端 demo 里很少見——大多數時候作者急于證明技術，忘了留一點讓觀眾自己編故事的空間。

代碼可以計算碰撞檢測，但"誰贏"這個懸念，得靠觀眾自己腦補。

這 10 個 demo 里，3 個用了上個月才穩定的瀏覽器特性，4 個純 CSS/HTML 實現，2 個依賴 JavaScript 庫。分布很平均，說明前端生態現在處于"新舊工具混用"的過渡期——沒有哪一方徹底碾壓另一方。

你最近有看到哪個讓自己愣住的前端實驗？是技術實現超預期，還是交互邏輯反直覺？