PLATTER 平面音乐档案
暖纸白上的侧视唱片架:封套像档案一样排开,但每张始终只有一个平面;
点进唱片后,空间退场,扁平曲目表与固定播放器接管阅读和操作。
样本来自工作区 3d-music-album-clone,按目录顺序记作 task1。
要点
- 用 CSS
perspective+ 单张rotateY平面组织侧视唱片架,不补侧面、背面和盒厚 - 让选中封套保留一点侧角并向前拉,周围封套退后淡出,空间层级靠位置而不是重阴影
- 把“档案感”落在竖排编号条、卷号、等宽小字和统一封套比例上,不堆怀旧贴图
- 用暖纸白、墨黑和单一信号红定主色,专辑各自的主题色只进入封套内部
- 拖拽、滚轮和方向键共用同一个连续索引,松手后吸附到最近封套
- 从唱片架进入详情时先移交同一张封套,再切成平面双栏,不突然跳到另一套页面
- 长曲目仍用原生滚动列表,空间效果只服务入口,不能污染正文的可读性
- 固定迷你播放器贯穿 library / detail,播放状态不因页面切换被重置
- 小屏把侧视架降级成居中横向轨道,按钮命中区保持至少 44px
prefers-reduced-motion下取消转场和均衡器动画,内容与操作一步到位- 缓动曲线与拖拽阈值是无源码复刻的推测值、不是原作测量,移植时按手感自由调整
上面的 demo 直接由工作区 3d-music-album-clone 原项目构建,完整保留 12 张专辑、
曲目数据、搜索、队列、键盘导航、拖拽/滚轮吸附、详情轮播、长曲目滚动条和音频播放器,
不是为文章重写的简化样例。