文字沿路径

网页上的字永远躺在一条水平线上。让它绕着圆、沿着弧跑, 一眼就跳出"网页"的默认观感。

方案 A · SVG textPath(静态排布用这条)

这一行仍是一段完整文本——可以用鼠标选中它、可以 Ctrl+F 搜到、 读屏正常朗读。静态沿路径排版,这条就够了。

方案 B · CSS offset-path(需要逐字动画时)

各字从起点沿弧线滑到自己的位置,并跟着切线转向。 代价是每个字必须是独立元素,文本被拆碎——所以容器补了 aria-label、 每个字 aria-hidden,不然等于把这段内容从读屏用户那里删掉。

这里不能做无限流动:offset-distance 在开放路径上 钳制到 100%,只有闭合路径才环绕。硬做的话后半个周期所有字都堆在末端。 想要无限循环得用闭合路径——就是下面这个徽章。

入场也不要动画 offset-distance:每个字时长相同、 travel 距离不同(第 n 个要走 n/N 的路径),等于后面的字速度快 n 倍, 半路就会超过前面的字,过程中读起来是乱序的。 正确做法是字始终待在自己的位置上,只做透明度/位移入场。

圆形徽章

整圆路径 + 匀速前进。别用 rotate 转整个容器—— 那样每个字的朝向是错的,只有整体在转。

拆字 = N 个绝对定位元素 + N 个 offset-path 计算。 一句话十几个字没问题,别拿它排段落。
弧度大的路径上字距会被压缩/拉开,均分不一定好看,需要手工调分布。
不支持 offset-path 的老环境已降级成普通横排。
配色排版是占位。进项目要跟项目的设计体系走(库规范铁律 6)。