星空特效代码通过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);
