如何用CSS实现星级评分激活星星逐个从左到右过渡动画

核心思路：通过给不同位置的星星设置递增的动画延迟，仅对带.active类的激活星星播放变色动画，无需JS即可实现从左到右逐个点亮的效果，适配任意星级总数和任意评分分值。

完整CSS代码 #

兼容原有背景色实现 #

/* 父容器基础样式，可按需调整间距 */
.rating {
  display: flex;
  gap: 4px;
}
.star {
  width: 20px;
  height: 20px;
  background-color: #eee; /* 未激活默认灰色 */
}
/* 按顺序配置星星动画延迟，最多支持10颗，需更多星级直接按规则追加即可 */
.star:nth-child(1) { --delay: 0s; }
.star:nth-child(2) { --delay: 0.5s; }
.star:nth-child(3) { --delay: 1s; }
.star:nth-child(4) { --delay: 1.5s; }
.star:nth-child(5) { --delay: 2s; }
.star:nth-child(6) { --delay: 2.5s; }
.star:nth-child(7) { --delay: 3s; }
.star:nth-child(8) { --delay: 3.5s; }
.star:nth-child(9) { --delay: 4s; }
.star:nth-child(10) { --delay: 4.5s; }

.star.active {
  /* forwards属性保持动画结束后的激活状态 */
  animation: starBgActive 0.5s ease forwards var(--delay);
}
@keyframes starBgActive {
  from { background-color: #eee; }
  to { background-color: #000; }
}

字符星星实现（和示例展示效果★★★☆☆完全一致） #

如果不想用背景色实现，可改用字符星星，仅需替换.star相关样式即可：

.star {
  font-size: 24px;
  line-height: 1;
  color: #eee;
}
.star::before {
  content: '★';
}
@keyframes starBgActive {
  from { color: #eee; }
  to { color: #000; }
}

使用说明 #

• 无需修改原有HTML结构，总星数按需增减即可，当前默认支持最多10颗，需要更多星级直接按nth-child(N)的规则追加延迟配置即可
• 评分分值通过给前N颗星星加.active类控制，比如3分就给前3个.star加active类，会自动按顺序点亮到对应星级
• 可自定义调整动画速度：修改@keyframes的时长、以及--delay的增量值即可调整单个星星的点亮速度和间隔

内容的提问来源于stack exchange，提问作者CyberJ