使用html和css帮我写一段能运行的关于星空的动画
时间: 2024-05-13 10:18:06 浏览: 14
好的,以下是一个简单的星空动画效果,你可以在浏览器中运行它:
```
<!DOCTYPE html>
<html>
<head>
<title>星空动画</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
canvas {
background-color: #000;
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var stars = [];
var numStars = 1000;
// 创建星星对象并添加到数组中
for (var i = 0; i < numStars; i++) {
var x = Math.random() * canvas.width;
var y = Math.random() * canvas.height;
var size = Math.random() * 3;
stars.push({
x: x,
y: y,
size: size
});
}
// 绘制星星
function drawStars() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "#FFF";
for (var i = 0; i < numStars; i++) {
var star = stars[i];
ctx.fillRect(star.x, star.y, star.size, star.size);
}
}
// 更新星星的位置
function updateStars() {
for (var i = 0; i < numStars; i++) {
var star = stars[i];
star.x += Math.random() * 2 - 1;
star.y += Math.random() * 2 - 1;
if (star.x < 0 || star.x > canvas.width) {
star.x = Math.random() * canvas.width;
}
if (star.y < 0 || star.y > canvas.height) {
star.y = Math.random() * canvas.height;
}
}
}
// 循环执行绘制和更新
function loop() {
drawStars();
updateStars();
requestAnimationFrame(loop);
}
loop();
// 监听窗口大小变化,重新设置画布大小
window.addEventListener("resize", function() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
});
</script>
</body>
</html>
```
代码解释:
1. 首先创建一个 canvas 元素,并设置它的样式,让它覆盖整个窗口。
2. 在 JavaScript 中获取 canvas 元素和它的上下文对象。
3. 创建一个包含随机位置和大小的星星对象数组。
4. 编写两个函数,一个用于绘制星星,另一个用于更新星星的位置。
5. 编写一个循环函数,用 requestAnimationFrame() 方法调用绘制和更新函数,达到动画效果。
6. 监听窗口大小变化事件,重新设置画布大小。
希望这能帮到你。