星空模拟器：在网页上漫步星空 -- day 1星空模拟器：在网页上漫步星空 -- day 1 一、项目概述在这个星空模

星空模拟器：在网页上漫步星空 -- day 1

一、项目概述

在这个星空模拟器中，将利用HTML构建星空容器，使用CSS定义星星的样式，最后通过JavaScript实现星星的闪烁与移动效果。

二、效果展示

在这里插入图片描述

三、实现步骤

1. 创建星空容器（HTML）

第一步是构建我们的星空容器。我们需要一个简单的HTML结构，包含一个用于呈现星空的主要容器。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>星空模拟器</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="starfield"></div>
    <script src="script.js"></script>
</body>
</html>

2. 设置样式（CSS）

接下来，我们使用CSS来打造具有美感的星空背景和星星样式。背景将使用黑蓝色的渐变，星星则会在不同的位置和大小闪烁。

body {
    margin: 0;
    overflow: hidden;
    height: 100vh;
    background: linear-gradient(to bottom, #000428, #004e92); /* 背景渐变 */
}

.starfield {
    position: relative;
    width: 100%;
    height: 100%;
}

.star {
    position: absolute;
    border-radius: 50%;
    background: white;
    opacity: 0.8;
    transition: opacity 0.5s ease;
}

3. 控制星星的闪烁与移动（JavaScript）

最后，我们通过JavaScript控制星星的创建、闪烁和移动。每个星星会在随机位置生成，并模拟闪烁效果。

const starfield = document.querySelector('.starfield');
const numberOfStars = 100; // 星星数量

// 创建星星
for (let i = 0; i < numberOfStars; i++) {
    const star = document.createElement('div');
    star.classList.add('star');
    
    // 设置星星的随机位置和大小
    const size = Math.random() * 3 + 1; // 星星随机大小
    star.style.width = `${size}px`;
    star.style.height = `${size}px`;
    star.style.left = `${Math.random() * 100}vw`;
    star.style.top = `${Math.random() * 100}vh`;

    // 添加闪烁效果
    setInterval(() => {
        star.style.opacity = Math.random(); // 随机透明度
    }, 500);

    starfield.appendChild(star); // 将星星添加到星空容器中
}