html星空特效代码怎么运行_运行html星空特效代码法【教程】-html教程-PHP中文网

html星空特效代码怎么运行_运行html星空特效代码法【教程】

星夢妙者

发布： 2025-12-03 19:28:48

原创

330人浏览过

星空特效代码通过HTML、CSS和JavaScript实现动态星星与流星效果，复制代码保存为.html文件即可在浏览器中查看，适合用于网页美化。

html星空特效代码怎么运行_运行html星空特效代码法【教程】

想让网页背景变成梦幻的星空效果？其实用一段简单的HTML和JavaScript代码就能实现。下面教你如何快速运行一个炫酷的星空特效页面，适合用在个人网站、博客或学习练习中。

1. 星空特效代码是什么？

星空特效通常由HTML搭建结构，CSS设置样式，再配合JavaScript动态生成闪烁的星星，并模拟流星、飘动等动画效果。这类代码常用于美化网页背景。

2. 完整可运行的星空代码示例

复制以下代码，保存为 .html 文件（例如：star.html），然后用浏览器打开即可看到效果：

立即学习“前端免费学习笔记（深入）”；

无界AI

一站式AI创作、搜索、分享服务

233

查看详情

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <title>星空特效</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;
      background: #000;
    }
    .star {
      position: absolute;
      width: 2px;
      height: 2px;
      background: #fff;
      border-radius: 50%;
      animation: twinkle 2s infinite ease-in-out;
    }
    @keyframes twinkle {
      0%, 100% { opacity: 0.2; }
      50% { opacity: 1; }
    }
  </style>
</head>
<body>
  <script>
    const count = 200; // 星星数量
    for (let i = 0; i < count; i++) {
      const star = document.createElement("div");
      star.className = "star";
<pre class='brush:php;toolbar:false;'>  // 随机位置
  const x = Math.random() * window.innerWidth;
  const y = Math.random() * window.innerHeight;

  star.style.left = x + "px";
  star.style.top = y + "px";

  // 随机动画延迟
  star.style.animationDelay = Math.random() * 2 + "s";

  document.body.appendChild(star);
}

// 添加偶尔的“流星”
setInterval(() => {
  if (Math.random() < 0.02) {
    const meteor = document.createElement("div");
    meteor.style.position = "absolute";
    meteor.style.width = "3px";
    meteor.style.height = "3px";
    meteor.style.background = "white";
    meteor.style.boxShadow = "0 0 8px 1px rgba(255, 255, 255, 0.8)";
    meteor.style.borderRadius = "50%";
    meteor.style.opacity = "0.8";

    let x = Math.random() * window.innerWidth;
    let y = 0;
    meteor.style.left = x + "px";
    meteor.style.top = y + "px";

    document.body.appendChild(meteor);

    let speed = 3;
    const move = () => {
      y += speed;
      x += 2;
      meteor.style.top = y + "px";
      meteor.style.left = x + "px";

      if (y < window.innerHeight && x < window.innerWidth) {
        requestAnimationFrame(move);
      } else {
        meteor.remove();
      }
    };
    requestAnimationFrame(move);
  }
}, 2000);

登录后复制

</script> </body> </html>