html本身不能实现动画，必须依赖css的transition、@keyframes或svg路径控制；javascript仅负责切换状态（如增删active类），所有视觉动效均由css完成。
直接说结论：HTML 本身做不了动画，收藏星标 动画必须靠 CSS 实现，JavaScript 只负责切换状态（比如加/删 active 类）。所谓“保姆级教程”容易让人误以为能纯 HTML 完成，实际卡点全在 CSS 的 transition、@keyframes 和 SVG 路径控制上。
为什么不能只用 HTML + 内联 style 做星标动画
HTML 是结构层，没有时间轴、缓动、状态过渡能力。哪怕你用 style="color: gold" 硬写颜色，点击后颜色突变，毫无“收藏感”。真实需求是：点击时星标从空心→实心+缩放+变色+微旋转，这个过程必须由 CSS 控制。
-
<input type="checkbox">或<button></button>触发状态，但样式变化全靠后续的.star.active类 - 用
<svg></svg>替代 Unicode 星号（如 ★），才能精确控制路径描边、填充和形变 - 纯
<i></i>+ Font Awesome 图标会受字体加载延迟影响，且无法对单个路径做动画
CSS 实现星标填充动画的关键三步
核心不是“怎么画星”，而是“怎么让填充看起来是‘流进来’的”。SVG 的 fill 本身不支持过渡，得用 stroke-dasharray + stroke-dashoffset 模拟绘制动画，或用 clip-path 配合 transform。
- 给
<path></path>设置fill: none，用stroke描边，再通过stroke-dasharray把整条路径切成虚线段 - 初始
stroke-dashoffset设为路径总长，让虚线完全偏移出去；激活时设为0，视觉上就是“画出来” - 配合
transition: stroke-dashoffset 0.3s ease-out，比单纯fill过渡更可控 - 如果用
clip-path: polygon()，注意 Safari 对动态clip-path支持差，优先选 SVG 路径方案
JavaScript 只需 toggle class，别碰内联 style
很多人写 JS 直接 el.style.fill = "gold"，这会覆盖 CSS 里定义的 transition，导致动画失效。正确做法是只操作类名，把样式逻辑全交给 CSS。
const starBtn = document.querySelector('.star-btn');
starBtn.addEventListener('click', () => {
starBtn.classList.toggle('active');
});
- 避免用
setAttribute('style', ...)或cssText，它们会打断 CSS 动画链 - 如果要兼容旧浏览器（IE11），不用
classList，改用className字符串拼接，但现代项目没必要 - 移动端注意添加
touchstart事件，防止 iOS 点击延迟导致动画响应滞后
真正难的不是写出第一版动画，而是让星标在不同尺寸卡片里缩放不糊、在深色/浅色背景上都有足够对比度、点击反馈不和父容器的 transform 冲突——这些细节没测试就上线，用户第一眼看到的就是卡顿或错位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
