利用CSS打造动感十足的中秋节繁星**

前端

2023-10-08 19:56:47

在中华民族的传统节日中，中秋节有着举足轻重的地位，是一个充满欢乐与亲情的美好节日。在这个特殊的夜晚，人们赏月、品茶、吃月饼，共度佳节。

为了让中秋节更加难忘，您可以利用CSS 制作一个星星闪烁动效，为节日增添一份浪漫与温馨的气氛。本教程将为您提供详细的制作步骤，即使是初学者也能轻松掌握。

步骤1：准备工作

在开始制作之前，您需要准备以下材料：

文本编辑器（如Sublime Text、Atom、Visual Studio Code等）
浏览器（如Chrome、Firefox、Edge等）
中秋节背景图片（可选）

步骤2：创建HTML文件

打开文本编辑器，新建一个HTML文件，并保存为"index.html"。在文件中添加以下代码：

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <h1>中秋节快乐！</h1>
  <div id="stars"></div>
</body>
</html>

步骤3：添加CSS样式

在HTML文件中添加一个<style>标签，并在其中添加以下CSS样式：

/*整体容器样式*/
#stars {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

/*星星样式*/
.star {
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: white;
  animation: twinkle 2s infinite alternate;
}

/*星星闪烁动画*/
@keyframes twinkle {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

步骤4：添加JavaScript代码

在HTML文件中添加一个<script>标签，并在其中添加以下JavaScript代码：

//获取星星容器
var stars = document.getElementById('stars');

//创建星星
for (var i = 0; i < 100; i++) {
  var star = document.createElement('div');
  star.classList.add('star');

  //设置星星的位置
  star.style.top = Math.random() * 100 + 'vh';
  star.style.left = Math.random() * 100 + 'vw';

  //将星星添加到容器中
  stars.appendChild(star);
}