返回

欢庆新年新气象，闪耀星光动画特效带你点亮2023

前端

闪耀星光，迎接新春：全屏星星闪烁动画特效

迎接新年的到来，打造一场视觉盛宴，全屏星星闪烁动画特效必不可少。这篇文章将手把手教你如何用简单的代码，实现一个璀璨星空，点亮你的新年庆祝活动。

一、准备工作

要开始创建这个令人惊叹的动画，你需要一个文本编辑器和一个浏览器。推荐使用功能强大且免费的 VS Code 作为文本编辑器，以及 Chrome、Firefox 或 Safari 作为浏览器。

二、编写代码

1. HTML 代码

创建一个新的 HTML 文件，粘贴以下代码：

<!DOCTYPE html>
<html>
<head>
  
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    ...
  </div>
  <script src="script.js"></script>
</body>
</html>

2. CSS 代码

在同一个文件夹中，创建一个 CSS 文件，粘贴以下代码：

.container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
}

.star {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #fff;
  animation: twinkle 2s infinite;
}

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

3. JavaScript 代码

最后，创建一个 JavaScript 文件，粘贴以下代码：

const stars = document.querySelectorAll('.star');

function twinkleStars() {
  for (let i = 0; i < stars.length; i++) {
    stars[i].classList.add('twinkle');
  }
}

setInterval(twinkleStars, 500);

三、运行代码

将 HTML、CSS 和 JavaScript 文件保存好，然后在浏览器中打开 HTML 文件。你就会看到一个全屏的星星闪烁动画特效，点亮你的新年庆祝活动。

四、文字 3D 立体效果

除了闪耀的星光，你还可以用文字 3D 立体效果为你的新年祝福增添一份惊喜。

1. HTML 代码

创建一个新的 HTML 文件，粘贴以下代码：

<!DOCTYPE html>
<html>
<head>
  
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <div class="text">
      <h1>新年快乐</h1>
    </div>
  </div>
  <script src="script.js"></script>
</body>
</html>

2. CSS 代码

在同一个文件夹中，创建一个 CSS 文件，粘贴以下代码：

.container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
}

.text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

h1 {
  font-family: Arial, sans-serif;
  font-size: 50px;
  color: #fff;
  text-shadow: 0 0 10px #fff,
              0 0 20px #fff,
              0 0 30px #fff,
              0 0 40px #fff;
}

3. JavaScript 代码

最后，创建一个 JavaScript 文件，粘贴以下代码：

const text = document.querySelector('.text');

function rotateText() {
  text.style.transform = `rotate(${Math.random() * 360}deg)`;
}

setInterval(rotateText, 1000);

五、运行代码

将 HTML、CSS 和 JavaScript 文件保存好，然后在浏览器中打开 HTML 文件。你就会看到一个新年快乐的文字，在屏幕上旋转着，让你的新年祝福更加立体生动。

六、结语

这些全屏星星闪烁动画特效和文字 3D 立体效果，将为你的新年庆祝活动增添一份科技感和节日气氛。赶快动手试试，让你的新年焕然一新！

常见问题解答

  1. 我无法让星星闪烁起来，怎么办？
    请确保你已经正确地链接了 JavaScript 文件，并且 JavaScript 代码中没有任何语法错误。

  2. 我无法让文字旋转起来，怎么办？
    请确保你已经正确地链接了 JavaScript 文件，并且 JavaScript 代码中没有任何语法错误。你还可以检查浏览器控制台，查看是否有任何错误消息。

  3. 如何调整星星的闪烁速度？
    你可以通过修改 JavaScript 中 setInterval 函数中的时间间隔来调整星星的闪烁速度。时间间隔越短，星星闪烁得越快。

  4. 如何更改文字的颜色？
    你可以通过修改 CSS 代码中 h1 标签的 color 属性来更改文字的颜色。

  5. 如何添加更多星星或文字？
    你可以通过在 HTML 代码中添加更多的 .star 或 .text 元素来添加更多星星或文字。