javascript实现随机显示星星特效

实现随机显示星星特效可以使用JavaScript编程语言，在HTML和CSS文件中结合使用来实现。下面是一个完整攻略：

1. 编写HTML和CSS

首先，在HTML文件中创建一个用于呈现星星特效的 div 元素，给它一个适当的 ID。

<div id="stars"></div>

接下来，在CSS文件中设置该 div 元素的样式，包括宽度、高度、背景颜色等。这些样式将为星星特效奠定基础。不仅如此，还需要准备好调用星星特效用到的样式，例如：

.stars {
  position: absolute;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.8);
  box-shadow: 0px 0px 2px #fff,
              0px 0px 10px #fff,
              0px 0px 20px #fff,
              0px 0px 30px #fff;
  animation: twinkle .5s ease-in-out infinite alternate;
  z-index: -1;
}
@keyframes twinkle {
  from { opacity: 1; transform:scale(1); }
  to { opacity: 0; transform:scale(2); }
}

其中的 .stars 样式是本特效的主要样式，animation属性制定了一个twinkle动画，表示一个星星的闪烁。

2. 编写JavaScript

接下来，在JavaScript文件中编写代码实现随机显示星星特效。

2.1 创建星星数量

通过 JavaScript 的 createElement() 方法和 appendChild() 方法创建星星。

const stars = document.getElementById('stars');
const NUM_STARS = 100;

for (let i = 0; i < NUM_STARS; i++) {
  const star = document.createElement('div');
  star.classList.add('stars');
  stars.appendChild(star);
}

该代码使用了常量 NUM_STARS 表示星星的数量，使用了一个 for 循环来实例化每个星星，然后将它们添加到之前创建的 stars div 元素内。

2.2 星星动画

为了使星星能够动起来，需要使用 JavaScript 创建一个新的 CSS 动画。这个动画会让星星来回闪烁。

const style = document.createElement('style');
document.head.appendChild(style);
style.sheet.insertRule(`
  @keyframes twinkle {
    from {
      opacity: 1;
      transform: scale(1);
    }
    to {
      opacity: 0;
      transform: scale(2);
    }
  }
`);

const starsArray = Array.from(stars.children);

starsArray.forEach((s) => {
  const TWINKLE_TIME = Math.floor(Math.random() * 10) + 5;
  const TWINKLE_DELAY = Math.floor(Math.random() * 10) / 10;

  s.style.animationDuration = `${TWINKLE_TIME}s`;
  s.style.animationDelay = `${TWINKLE_DELAY}s`;
});

这段代码创建了一个