用 opacity 配合 @keyframes 可实现星星评分的柔和闪烁效果：通过定义 star-pulse 动画（0.6↔1.0↔0.6）、精准绑定 hover/active 状态、控制时长与次数，并适配无障碍偏好，确保提示清晰不干扰。
用 opacity 配合 @keyframes 实现星星评分的闪烁效果，核心是让选中的星星（或悬停/激活状态）在透明度上做周期性变化，营造“呼吸感”或“高亮提示”的视觉反馈。
1. 基础结构：确保星星可独立控制透明度
每个星星建议用 <span></span> 或 <i></i> 标签，并通过类名区分状态（如 .star、.star.active、.star.hover）。避免对整个评分容器统一动画，否则所有星星会同步闪烁，失去语义。
- 使用
display: inline-block或inline-flex保证星星水平排列且支持 opacity 动画 - 给星星设置
transition: opacity 0.2s ease，让非闪烁状态的切换更平滑 - 闪烁只加在需要强调的状态上（比如用户悬停时、或提交后高亮已选星级）
2. 定义闪烁动画：opacity 循环变化
用 @keyframes 创建一个从 0.6 → 1.0 → 0.6 的柔和循环，避免突兀闪断：
@keyframes star-pulse {
0%, 100% { opacity: 0.6; }
50% { opacity: 1.0; }
}
这个动画持续时间建议设为 1.2s～2s，太快显得焦躁，太慢失去提示感。可配合 infinite 和 ease-in-out 让明暗过渡更自然。
立即学习“前端免费学习笔记（深入）”；
3. 应用动画：精准触发，避免误闪
不要一加载就全闪，而是按需激活。常见两种场景：
-
悬停闪烁：鼠标移到某颗星时，它和左边所有星一起闪烁（模拟“预选”效果）
.rating-container:hover .star:hover ~ .star, .rating-container:hover .star:hover { animation: star-pulse 1.4s infinite ease-in-out; } -
选中后闪烁：用户点击完成评分，给已激活的星星加一次短促闪烁（可用
animation-fill-mode: forwards+animation-iteration-count: 2）.star.active { animation: star-pulse 0.8s ease-in-out 2; }
4. 注意细节：避免闪烁干扰可读性和性能
闪烁虽小，但容易引发不适或影响辅助访问：
- 别让动画持续运行超过 3 秒，尤其对已提交的评分，建议用单次或双次脉冲代替无限循环
- 在 prefers-reduced-motion 开启时禁用动画：
@media (prefers-reduced-motion: reduce) { .star.active, .star:hover { animation: none; opacity: 1; } } - 避免同时对大量星星（如 10 星制）全部启用闪烁，优先作用于当前交互区域
基本上就这些。opacity 方案轻量、兼容性好（IE10+），比 transform 或 filter 更稳妥，关键是控制好触发时机和节奏，让闪烁成为引导，而不是干扰。
