CodePen這10個(gè)demo讓前端圈集體破防

上個(gè)月前端社區(qū)流傳一個(gè)數(shù)據(jù)：CodePen月活開發(fā)者突破400萬(wàn)，但日均新增demo里能被記住的不到0.3%。

這10個(gè)demo屬于那0.3%。它們沒(méi)有依賴堆疊的框架，沒(méi)有炫技式的粒子特效，卻能讓同行停下手里的活，把代碼逐行扒開看。

把下拉菜單做成射擊游戲的人

Chris Bolson的自定義選擇器讓我重新理解了"組件"二字。它長(zhǎng)得完全不像瀏覽器原生的select，交互流程卻絲滑到讓人忘記這是網(wǎng)頁(yè)。沒(méi)有突兀的彈窗，沒(méi)有層級(jí)錯(cuò)亂，光標(biāo)移上去的瞬間，選項(xiàng)像液體一樣展開。

Temani Afif走了另一條路。他的選擇器本質(zhì)是打水果游戲——選中一個(gè)選項(xiàng)，對(duì)應(yīng)水果爆炸。聽(tīng)起來(lái)幼稚？實(shí)際體驗(yàn)卻暴露了一個(gè)被忽視的設(shè)計(jì)真理：表單控件的情緒價(jià)值長(zhǎng)期被低估。用戶在枯燥的填寫流程里，需要這種無(wú)意義的愉悅感。

兩個(gè)demo指向同一個(gè)問(wèn)題：為什么我們對(duì)原生表單控件容忍了二十年？答案藏在瀏覽器的兼容性墳場(chǎng)里。但2026年的前端工程師，終于有底氣說(shuō)"我可以做得更好"。

Safari團(tuán)隊(duì)親自下場(chǎng)教做人

Jen Simmons在蘋果的身份是Web開發(fā)者體驗(yàn)布道師。她最近放出一個(gè)demo，專門展示feComposite元素的用法——SVG濾鏡里的一個(gè)冷門屬性，用來(lái)控制圖形之間的合成模式。

demo里幾個(gè)彩色圓環(huán)周圍有層柔和的光暈。沒(méi)有feComposite，這層光暈會(huì)直接覆蓋圓環(huán)邊緣，變成廉價(jià)的描邊效果。這個(gè)屬性的存在，讓光暈和圖形產(chǎn)生了真實(shí)的物理疊加，像鏡頭眩光穿過(guò)玻璃。

Safari團(tuán)隊(duì)過(guò)去常被吐槽"Web標(biāo)準(zhǔn)跟隨者"，但這類demo的發(fā)布節(jié)奏在加快。他們開始用工程師語(yǔ)言對(duì)話，而不是發(fā)布會(huì)Keynote里的營(yíng)銷話術(shù)。

數(shù)據(jù)表格的千年痛點(diǎn)，被一行CSS終結(jié)

Bramus在Chrome Canary里測(cè)試的新功能，解決的是每個(gè)后端工程師都罵過(guò)的場(chǎng)景：千行數(shù)據(jù)表格，滾動(dòng)時(shí)表頭消失，左右拖拽時(shí)首列位移?，F(xiàn)在的解決方案是JavaScript監(jiān)聽(tīng)滾動(dòng)事件，計(jì)算位置，強(qiáng)制重繪——卡頓、抖動(dòng)、內(nèi)存泄漏，三選一。

新API叫position-visibility，語(yǔ)法直白到像偽代碼：position-visibility: anchors-visible。瀏覽器自己處理粘性定位的顯隱邏輯，開發(fā)者不用再寫那堆防抖節(jié)流。

這個(gè)功能從提案到Canary落地用了18個(gè)月。Bramus的demo里放了一張5000行的模擬表格，滾動(dòng)時(shí)表頭穩(wěn)如磐石。我把它發(fā)給做企業(yè)后臺(tái)的同事，對(duì)方回了三個(gè)字："終于等到"。

CSS能造什么？一臺(tái)能換臺(tái)的電視

Ben Evans的CSS Art每次出現(xiàn)，都會(huì)刷新我對(duì)"純樣式"的認(rèn)知邊界。這次是一臺(tái)完整的復(fù)古電視機(jī)，全部用HTML和CSS實(shí)現(xiàn)——沒(méi)有Canvas，沒(méi)有SVG，只有div和偽元素。

電視屏幕里播放著模擬的噪點(diǎn)畫面，旋鈕可以調(diào)節(jié)頻道，電源鍵有真實(shí)的按壓反饋。最離譜的是，換臺(tái)時(shí)屏幕會(huì)有CRT顯示器特有的那種水平掃描線閃爍。這些細(xì)節(jié)不是裝飾，是 Evans 對(duì)舊技術(shù)的考古式還原。

我在控制臺(tái)里把電視尺寸拉到全屏，盯著看了三分鐘。這種體驗(yàn)很難描述：你知道它是假的，但每個(gè)像素都在說(shuō)服你"這是真的"。

顏色、動(dòng)畫、條件判斷：CSS正在吞并JS的領(lǐng)地

Many Nicole的SVG demo標(biāo)題很直白："用相對(duì)顏色和sibling-index()函數(shù)改變色相"。代碼層面，她在路徑線條上應(yīng)用了CSS的相對(duì)顏色語(yǔ)法——oklch(from var(--base) l c calc(h + sibling-index() * 15))。每條線自動(dòng)偏移15度色相，形成流動(dòng)的漸變blob。

sibling-index()是2025年底進(jìn)草案的新函數(shù)，返回元素在同輩中的序號(hào)。以前這種效果需要預(yù)處理器循環(huán)生成，現(xiàn)在瀏覽器在運(yùn)行時(shí)計(jì)算。

Rob的教程更激進(jìn)：CSS原生的if()函數(shù)。不是預(yù)處理器里的條件編譯，是貨真價(jià)實(shí)的運(yùn)行時(shí)條件判斷。語(yǔ)法丑得像早期PHP——@container style(--theme: dark) { ... } 的變體——但功能實(shí)打?qū)崳焊鶕?jù)自定義屬性值切換樣式，無(wú)需JavaScript介入。

教程結(jié)尾有個(gè)測(cè)驗(yàn)，我錯(cuò)了一道題。題目問(wèn)if()和container query的優(yōu)先級(jí)關(guān)系，答案反直覺(jué)。Rob在評(píng)論區(qū)回復(fù)："規(guī)范還在變，建議每月復(fù)查"。

滾動(dòng)驅(qū)動(dòng)的變焦，把視差效果卷沒(méi)了

Cyd Stumpel的demo標(biāo)題自帶情緒："瘋狂的縮放"。頁(yè)面滾動(dòng)時(shí)，中心元素以指數(shù)級(jí)速度放大，背景以不同速率后退，形成類似多普勒效應(yīng)的視覺(jué)沖擊。

技術(shù)實(shí)現(xiàn)上，這是scroll-driven animations和CSS transform的疊加。關(guān)鍵洞察在于：scale的變化曲線不是線性的，而是用了cubic-bezier制造加速感。同樣的原理，視差滾動(dòng)顯得像PPT切換。

我在項(xiàng)目文檔里標(biāo)記了"可借鑒"。這種效果對(duì)性能極度敏感，Stumpel的代碼里有一行注釋："Firefox目前跳過(guò)動(dòng)畫，優(yōu)雅降級(jí)為靜態(tài)布局"。這是2026年前端工程師的默認(rèn)思維：先保證不崩，再追求驚艷。

那些沒(méi)被寫進(jìn)標(biāo)題的細(xì)節(jié)

Margarita的P5.js絲帶動(dòng)畫被歸類為"教學(xué)demo"，但代碼結(jié)構(gòu)值得拆解。她把物理參數(shù)全部暴露為頂部控制面板——阻尼系數(shù)、彈性模量、色彩周期——用戶調(diào)整數(shù)值的同時(shí)，左側(cè)代碼高亮對(duì)應(yīng)變量。這種即時(shí)反饋機(jī)制，比任何文檔都有效。

Shivani的"反向方向"挑戰(zhàn)作品是兩個(gè)色塊軍團(tuán)對(duì)沖。Cyan隊(duì)和Magenta隊(duì)從對(duì)角出發(fā)，在中線碰撞后彈回。隨機(jī)種子決定每局的勝負(fù)，但視覺(jué)呈現(xiàn)上，敗方會(huì)有粒子潰散效果。

我刷了十七次，想找出規(guī)律。沒(méi)有規(guī)律。這就是它的設(shè)計(jì)意圖：對(duì)抗系統(tǒng)的不可預(yù)測(cè)性，比預(yù)設(shè)的戲劇性更真實(shí)。

十個(gè)demo看完，一個(gè)感受越來(lái)越強(qiáng)烈。前端技術(shù)棧的膨脹期似乎過(guò)去了，2026年的創(chuàng)造力流向更底層的基礎(chǔ)設(shè)施——瀏覽器引擎、CSS規(guī)范、原生API。框架還在迭代，但讓人眼前一亮的作品， increasingly 來(lái)自對(duì)平臺(tái)能力的深度挖掘。

Chris Bolson的自定義選擇器在GitHub被fork了2300次，但issue區(qū)最熱的討論是："為什么不用現(xiàn)成的組件庫(kù)？" 高贊回復(fù)來(lái)自Bolson本人："因?yàn)楝F(xiàn)成的解決的是'能用'，我想解決的是'想多用幾次'"。

這句話會(huì)被寫進(jìn)多少人的年終總結(jié)里？