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 库。分布很平均，说明前端生态现在处于"新旧工具混用"的过渡期——没有哪一方彻底碾压另一方。

你最近有看到哪个让自己愣住的前端实验？是技术实现超预期，还是交互逻辑反直觉？