建站纪事 / 02/2026 · 09 · 22/5 分钟阅读
电台有了一张会转的唱片
给场域电台换上真实专辑封面和绕心旋转的黑胶,顺手修正悬浮歌词的停靠对齐;一次视觉改造背后是三个排版细节。
AudioCSSLayout
01
封面是内容的一部分
唱片不只是装饰:切换曲目时,封面帮助访客确认「现在放的是这首」。封面通过音乐商店的公开接口抓取,并且只相信歌手与歌名同时匹配的结果——商店里有不少同名的翻唱与伴奏,只看标题就会抓错。优先录音室版本,现场与伴奏只作兜底。
有两首独立发行的曲目在商店里查不到,它们继续使用程序生成的占位图。占位不是权宜之计:它保证任何曲目都有确定的视觉,不会留白。
02
旋转要绕着圆心
旋转由一段 CSS 关键帧完成,组件只切换 animation-play-state:播放时 running,暂停时 paused,再次播放从停住的角度继续,而不是回到起点。纹路、封面与中心孔画在同一层里绕圆心转,高光留在外面不随盘转动——像固定光源下的反光。
03
img 是替换元素
第一版封面的位置偏在左上角。原因写在 CSS 规范里:img 这类替换元素不会被绝对定位的 inset 拉伸,只会保持固有尺寸、锚定在左上角;div 和 span 才会按 inset 铺满。修法是让普通容器负责定位,图片只负责填满容器。这类问题不实际跑起来看很难发现。
04
歌词的停靠点
悬浮歌词默认停在播放器正上方。此前停靠点写死了 24px 的右边距,移动端会差出 8px;卡片首帧留在文档流里还会把容器撑高,量出来的位置必然不对。现在改为按播放器实测矩形对齐右缘,测量完成前先隐藏,量完再落位——跳位就看不见了。