css 动画制作星星

使用 CSS 动画制作星星

创建星星形状

通过 CSS 的 ::before 和 ::after 伪元素结合 transform 属性生成五角星形状。以下是一个基础的星星样式代码：

.star {
  position: relative;
  width: 0;
  height: 0;
  border-right: 50px solid transparent;
  border-bottom: 35px solid gold;
  border-left: 50px solid transparent;
  transform: rotate(35deg);
}

.star::before {
  content: '';
  position: absolute;
  top: -25px;
  left: -50px;
  width: 0;
  height: 0;
  border-right: 50px solid transparent;
  border-bottom: 35px solid gold;
  border-left: 50px solid transparent;
  transform: rotate(-70deg);
}

添加闪烁动画

通过 @keyframes 定义透明度变化实现闪烁效果，并将其应用到星星上：

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

.star {
  animation: twinkle 2s infinite alternate;
}

随机分布多个星星

使用 CSS 变量和 nth-child 为多个星星设置不同的位置、大小和动画延迟：

.stars-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.star {
  position: absolute;
  animation-delay: calc(var(--delay) * 1s);
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  transform: scale(var(--size)) rotate(35deg);
}

/* 示例：HTML 中通过 style 属性为每个星星设置变量 */
<div class="stars-container">
  <div class="star" style="--x: 20; --y: 30; --size: 0.8; --delay: 0.3"></div>
  <div class="star" style="--x: 70; --y: 50; --size: 1.2; --delay: 1.1"></div>
</div>

进阶效果：旋转星星

添加旋转动画使星星更生动：

@keyframes spin {
  from { transform: rotate(0deg) scale(var(--size)); }
  to { transform: rotate(360deg) scale(var(--size)); }
}

.star {
  animation: 
    twinkle 2s infinite alternate,
    spin 10s linear infinite;
}

注意事项

• 使用 vw/vh 单位确保星星在不同屏幕尺寸下适配。
• 通过调整 border 的宽度和颜色可以改变星星的锐利度和颜色。
• 减少动画性能消耗：避免过多同时运行的复杂动画，优先使用 opacity 和 transform 属性。