纯css可实现播放/暂停图标平滑切换：用两个重叠图标元素，通过opacity控制显隐并配合transform微调，避免content切换或svg路径d属性动画等不支持方案。
用 transform 和 opacity 实现播放/暂停图标的平滑切换
纯 CSS 能实现播放图标（▶）和暂停图标（▌▌）之间的过渡动画，但必须避开两个常见误区：一是直接用 content 切换伪元素内容（不触发过渡），二是用不同 SVG 路径做 d 动画（浏览器支持差、易错位）。真正稳定的做法是用两个重叠的图标元素，靠 opacity 控制显隐，再配合 transform: scale() 或 translate() 做视觉微调，让切换看起来像“变形”。
实操建议：
- 用一个容器包住两套图标（
<span class="icon-play"></span>和<span class="icon-pause"></span>），都设为position: absolute且居中重叠 - 默认状态只显示播放图标（
opacity: 1），暂停图标opacity: 0；切换时同时反向设置两者 opacity，并加transition: opacity 0.2s ease - 如果想增强“变形感”，可给暂停图标加
transform: scale(0.95)，播放图标保持scale(1)，过渡时一起动，人眼会感知为形状收敛/展开 - 避免用
display: none控制显隐——它不参与过渡，会导致闪断
SVG <path></path> 的 d 属性无法直接过渡？别硬刚
很多人想用单个 <svg></svg> + 单个 <path></path>，靠 JS 改 d 值实现播放变暂停，再加 transition: d 0.3s。这行不通：d 不是可过渡的 CSS 属性，Chrome/Firefox 均不支持，强行写只会静默失败。
替代方案更可靠：
立即学习“前端免费学习笔记（深入）”；
- 用两个
<path></path>（分别对应播放和暂停路径），共用一个<g></g>容器，通过父级 class 控制 opacity 和 transform - 确保两个
<path></path>的viewBox和坐标系完全一致，否则缩放或位移时会偏移 - 暂停图标的
d建议用两个竖线（M 8 4 L 10 4 L 10 16 L 8 16 Z M 14 4 L 16 4 L 16 16 L 14 16 Z），比用■字符更可控
用 :hover 或 data-playing 控制状态时，JS 绑定要防重复
图标状态通常由 JS 控制（比如点击后调用 video.play() 或 video.pause()），再同步更新 DOM class。容易踩的坑是：多次绑定 click 事件没解绑，导致 class 切换两次，图标闪一下又切回去。
安全做法：
- 用
dataset管理状态，比如button.dataset.playing = "true"，CSS 里写[data-playing="true"] .icon-play { opacity: 0; } - 绑定事件时用
addEventListener配合{ once: true }（仅需触发一次的初始化）或检查是否已绑定 - 不要在每次
play/pause事件回调里重复 setAttribute，而是先比对当前状态再更新，减少无谓 DOM 操作
移动端点击区域小？用 padding 和 pointer-events 补足
播放/暂停图标本身很小（常是 16×16px），在手机上极易点空。不能只靠放大图标——会破坏 UI 比例，而应该扩展可点击区域。
推荐组合：
- 给按钮容器设
padding: 12px，用box-sizing: border-box保证尺寸可控 - 图标内部用
vertical-align: middle对齐，避免 baseline 错位 - 如果按钮内还含其他元素（如文字），给图标加
pointer-events: none，让点击穿透到父容器，统一由 container 处理逻辑 - 避免用
font-size拉大 Unicode 字符（如 ▶），iOS Safari 对某些字符渲染模糊，优先用 SVG
最麻烦的其实是图标对齐：SVG 的 vertical-align 默认是 baseline，和文字混排时容易上下跳，加 vertical-align: -0.125em 微调比猜 margin 更稳。这个细节上线前不测真机，十有八九要返工。
