在网页的星星评分组件中，添加闪烁效果可以让评分区域更具吸引力，这种效果不需要依赖JavaScript，仅通过CSS的原生动画能力就能实现，核心是利用opacity属性控制透明度变化，配合keyframes定义动画序列。
基础星星评分结构搭建
首先我们需要先构建星星评分的基础HTML结构，这里用无序列表来存放星星元素，每个列表项代表一颗星星，默认使用空心的星星符号，后续通过CSS控制选中状态和闪烁效果。
<div class="star-rating">
<ul class="stars">
<li class="star active">★</li>
<li class="star active">★</li>
<li class="star active">★</li>
<li class="star">★</li>
<li class="star">★</li>
</ul>
</div>
基础样式设置
接下来给星星评分组件添加基础样式，设置星星的颜色、大小，区分选中状态和未选中状态，未选中的星星设置为灰色，选中的设置为金色。
.star-rating {
font-size: 24px;
}
.stars {
list-style: none;
padding: 0;
margin: 0;
display: flex;
gap: 4px;
}
.star {
color: #ccc; /* 未选中星星颜色 */
cursor: pointer;
}
.star.active {
color: #ffc107; /* 选中星星颜色 */
}
定义闪烁动画
闪烁效果的核心是让元素的透明度在一段时间内反复变化，我们使用@keyframes来定义这个变化过程，这里设置透明度从1降到0.3再回到1，形成明暗交替的闪烁感。
/* 定义闪烁动画的关键帧 */
@keyframes twinkle {
0% {
opacity: 1;
}
50% {
opacity: 0.3;
}
100% {
opacity: 1;
}
}
为星星添加闪烁效果
定义好动画之后，我们将动画绑定到选中的星星元素上，设置动画持续时间为1秒，无限循环播放，这样选中的星星就会持续闪烁。
/* 为选中的星星添加闪烁动画 */
.star.active {
color: #ffc107;
animation: twinkle 1s infinite;
}
调整动画参数适配需求
如果默认的闪烁效果不符合需求，可以调整动画的相关参数，比如修改动画时长、透明度变化范围、循环次数等，以下是几个常见的调整示例。
调整闪烁频率
将动画时长改为2秒，闪烁会更缓慢，时长改为0.5秒，闪烁会更快。
.star.active {
color: #ffc107;
animation: twinkle 2s infinite; /* 2秒完成一次闪烁 */
}
限制闪烁次数
如果不希望星星一直闪烁，可以将infinite改为具体的次数，比如3次，闪烁3次后就会停止。
.star.active {
color: #ffc107;
animation: twinkle 1s 3; /* 闪烁3次后停止 */
}
调整亮度变化范围
修改关键帧中的opacity值，可以调整闪烁的明暗差，比如将最低透明度改为0.6，闪烁的幅度会更小。
@keyframes twinkle {
0% {
opacity: 1;
}
50% {
opacity: 0.6;
}
100% {
opacity: 1;
}
}
完整示例代码
以下是包含所有功能的完整代码，可以直接复制到HTML文件中运行查看效果。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS星星评分闪烁效果</title>
<style>
.star-rating {
font-size: 24px;
}
.stars {
list-style: none;
padding: 0;
margin: 0;
display: flex;
gap: 4px;
}
.star {
color: #ccc;
cursor: pointer;
}
/* 定义闪烁动画 */
@keyframes twinkle {
0% {
opacity: 1;
}
50% {
opacity: 0.3;
}
100% {
opacity: 1;
}
}
.star.active {
color: #ffc107;
animation: twinkle 1s infinite;
}
</style>
</head>
<body>
<div class="star-rating">
<ul class="stars">
<li class="star active">★</li>
<li class="star active">★</li>
<li class="star active">★</li>
<li class="star">★</li>
<li class="star">★</li>
</ul>
</div>
</body>
</html>
注意事项
- 如果页面中有多个星星评分组件，需要确保动画名称唯一，避免样式冲突。
- 闪烁效果不要设置得过于频繁，否则可能会影响用户的视觉体验，建议动画时长不低于0.5秒。
- 如果需要兼容旧版本浏览器，需要添加对应的浏览器前缀，比如
-webkit-keyframes、-webkit-animation等。