
前后对比滑块
媒体 · 区块左右拖动分割线看改造前后。两层都是真 DOM,不是两张图拼的——所以右边那层照样能交互、能读屏。分割用 clip-path 而不是宽度,拖动时不触发重排;指针用 setPointerCapture 接管,手滑出容器也不会中断。滑块本身是 role="slider",方向键微调、Home/End 到两端,键盘用户不需要鼠标。
React复制 0无障碍
光标光斑卡片
布局 · 元素光标停在卡上时,一层径向光斑跟着走,同时按光标在卡内的相对位置给 ±6° 的倾斜。两个量都写成 CSS 变量,由 requestAnimationFrame 节流后直接写进 style,不触发 React 重渲染——用 state 存坐标的话,鼠标每移动一像素就重渲染一次子树,长列表里会直接掉帧。触屏上不启用倾斜,卡片就是一张静态卡。
React复制 0深色无障碍动效