星空特效代码通过HTML、CSS和JavaScript实现动态星星与流星效果，复制代码保存为.html文件即可在浏览器中查看，适合用于网页美化。
想让网页背景变成梦幻的星空效果？其实用一段简单的HTML和JavaScript代码就能实现。下面教你如何快速运行一个炫酷的星空特效页面，适合用在个人网站、博客或学习练习中。
1. 星空特效代码是什么？
星空特效通常由HTML搭建结构，CSS设置样式，再配合JavaScript动态生成闪烁的星星，并模拟流星、飘动等动画效果。这类代码常用于美化网页背景。
2. 完整可运行的星空代码示例
复制以下代码，保存为 .html 文件（例如：star.html），然后用浏览器打开即可看到效果：
立即学习“前端免费学习笔记（深入）”；
<!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>
3. 如何运行这段代码？
操作非常简单，按以下步骤即可：
- 打开记事本（Notepad）或任意文本编辑器（如 VS Code、Sublime Text）
- 将上面的完整代码全部复制粘贴进去
- 点击“文件” → “另存为”，文件名输入 star.html
- 保存类型选择“所有文件”，编码选 UTF-8
- 保存后双击这个 HTML 文件，浏览器会自动打开并显示星空动画
4. 常见问题与优化建议
如果效果不理想，可以检查以下几点：
- 确保文件以 .html 结尾，不要保存成 .txt
- 使用现代浏览器（Chrome、Edge、Firefox）打开，避免兼容问题
- 若想更炫酷，可引入 Three.js 实现 3D 星空，但需要额外引入库
- 手机端查看时，可能因性能限制动画略卡，可减少星星数量（修改 count 值）
基本上就这些。只要会复制粘贴，就能轻松拥有一个动态星空网页。你可以把它作为个人主页背景，或嵌入到其他项目中增强视觉体验。
