CSS动画星星闪烁做法使用技巧与常见问题解析

发布时间：2025-12-13 10:09:11 阅读：546 次

网页设计中，想要营造夜空氛围，让星星一闪一闪的效果特别常见。这种效果用 CSS 动画就能轻松实现，不需要额外的 JavaScript 或图片素材。

基本原理

星星闪烁的本质是透明度的变化。我们通过 CSS 的 @keyframes 定义一个从完全透明到不透明之间循环的动画，再把它应用到代表星星的元素上。

HTML 结构

先准备几个代表星星的 div 元素：

<div class="star" style="--i: 1; top: 10%; left: 20%"></div>
<div class="star" style="--i: 2; top: 30%; left: 70%"></div>
<div class="star" style="--i: 3; top: 50%; left: 40%"></div>

CSS 样式与动画

每个星星是一个小圆点，使用 border-radius 变成圆形，并通过自定义属性 --i 控制不同星星的动画延迟，让闪烁更有层次感：

.star {
  position: absolute;
  width: 6px;
  height: 6px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 4px #fff;
  animation: twinkle 1.5s infinite ease-in-out;
  animation-delay: calc(0.2s * var(--i));
}

@keyframes twinkle {
  0%, 100% {
    opacity: 0.2;
  }
  50% {
    opacity: 1;
  }
}

优化视觉效果

如果所有星星大小一样、闪烁频率相同，看起来会很呆板。可以加点随机性：

给不同星星设置不同的 width 和 height
用 animation-duration 设置不同的闪烁速度
添加轻微位移，模拟微风吹动的感觉

比如修改动画关键帧：

@keyframes twinkle {
  0% {
    opacity: 0;
    transform: translateY(0);
  }
  50% {
    opacity: 1;
    transform: translateY(-5px);
  }
  100% {
    opacity: 0;
    transform: translateY(0);
  }
}

再配合 JS 动态生成几十个星星，背景一暗，立马有种星空下的宁静感。这种效果用在节日页面、个人博客首页或者登录页，都很合适。

注意事项