17370845950

用 opacity 配合 @keyframes 可实现星星评分的柔和闪烁效果：通过定义 star-pulse 动画（0.6↔1.0↔0.6）、精准绑定 hover/active 状态、控制时长与次数，并适配无障碍偏好，确保提示清晰不干扰。

用 opacity 配合 @keyframes 实现星星评分的闪烁效果，核心是让选中的星星（或悬停/激活状态）在透明度上做周期性变化，营造“呼吸感”或“高亮提示”的视觉反馈。

1. 基础结构：确保星星可独立控制透明度

每个星星建议用 或 标签，并通过类名区分状态（如 .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 更稳妥，关键是控制好触发时机和节奏，让闪烁成为引导，而不是干扰。