js实现星星闪特效

首先介绍一下实现星星闪特效的基本思路，整个流程分为以下几步：

1. 随机生成 N 个星星的位置和大小
2. 再随机为每个星星设置一个动画延迟时间
3. 使用 CSS3 动画为每个星星设置闪烁效果
4. 可以通过 js 实现控制整个星空的暂停和继续

接下来，我将逐步详细讲解。

1. 随机生成 N 个星星的位置和大小

首先需要使用 js 随机生成一组星星的位置和大小，这可以使用循环来实现。可以控制星星的数量，随机生成坐标和大小的代码如下：

let starNum = 50;  // 星星的数量
let stars = [];  // 用来保存所有星星的数组

for(let i=0; i<starNum; i++){
  // 创建一个对象，用来保存星星的坐标和大小信息
  let star = {};
  // 随机生成星星的横坐标和纵坐标
  star.x = Math.floor(Math.random()*window.innerWidth);
  star.y = Math.floor(Math.random()*window.innerHeight);
  // 随机生成星星的大小，在 10～40 像素之间
  star.size = Math.floor(Math.random()*30 + 10);
  stars.push(star);
}

2. 为每个星星设置动画延迟时间

为了让每个星星的闪烁效果不一样，可以使用随机数为每颗星星指定一个动画延迟时间。代码如下：

for(let i=0; i<starNum; i++){
  // 随机生成星星的动画延迟时间
  stars[i].delay = Math.floor(Math.random()*10) + "s";
}

3. 使用 CSS3 动画为每个星星设置闪烁效果

这里可以使用 CSS3 中的 animation 属性来实现动画效果。为了让每个星星有所不同的闪烁效果，我们可以在 CSS 中指定每个星星的动画延迟时间。代码如下：

.star {
  position: absolute;
  background-color: #fff;
  border-radius: 50%;
  animation: star-shine 2s infinite ease-in-out;
}

.star:nth-child(1) {
  width: 20px;
  height: 20px;
  left: 100px;
  top: 170px;
  animation-delay: 1s;
}

.star:nth-child(2) {
  width: 30px;
  height: 30px;
  left: 220px;
  top: 300px;
  animation-delay: 2s;
}

...

/* 自定义动画 */
@keyframes star-shine {
  0% {
    opacity: 0;
    transform: scale(0.1);
  }
  5% {
    opacity: 1;
  }  
  50% {
    opacity: 0.6;
  }
  100% {
    opacity: 0;
    transform: scale(1.2);
  }        
}

在上面的代码中，可以看到 .star 样式表示每个星星的基础样式。animation 属性指定了该元素使用 star-shine 作为动画，每次动画持续时间为 2 秒，一直重复播放。同时，为了让每个星星的动画效果稍有不同，可以为每个星星单独设置 animation-delay 属性。

最后是 @keyframes 定义的 star-shine 动画效果，即让星星逐渐变亮、再逐渐变暗的闪烁过程。

4. 控制整个星空的暂停和继续

最后，可以使用 js 来控制整个星空是暂停还是继续播放的状态。这可以通过控制每个星星的 animation-play-state CSS 属性来实现。代码如下：

let isPlaying = true;  // 控制星空的继续或暂停

// 获取所有的星星元素
let starElements = document.querySelectorAll('.star');

// 暂停或继续触发的事件
function starToggle(){
  for(let i=0; i<starElements.length; i++){
    if(isPlaying){
      starElements[i].style.animationPlayState = 'paused';
    }else{
      starElements[i].style.animationPlayState = 'running';
    }
  }
  isPlaying = !isPlaying;  // 控制状态的变化
}

// 注册暂停或继续事件
let controlEl = document.querySelector('#control');
controlEl.addEventListener('click', starToggle);

需要注意的是，为了控制整个星空的动画状态，需要为每个星星设置相同的 animation-duration 属性。这样，所有星星的动画时长才能保持一致，从而实现整个星空的统一动画效果。

示例1：https://codepen.io/NovikovDS/pen/Vwvxyoo

示例2：https://codepen.io/Ivan989/pen/EapMrG