怎么用html做一个动态宇宙

在现代网页设计中，动态效果和交互性已成为吸引用户的重要元素，HTML（HyperText Markup Language）作为构建网页的基础，虽然本身不直接支持复杂的动态效果，但通过与CSS（Cascading Style Sheets）和JavaScript（JS）的结合，可以实现令人印象深刻的动态宇宙效果，本文将详细介绍如何使用HTML、CSS和JavaScript创建一个动态宇宙。

我们需要创建一个基本的HTML结构，用于承载宇宙中的星球和星系，以下是一个简单的HTML结构示例：

<!DOCTYPE html>
<html lang="en">
<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 id="universe">
        <div class="galaxy">
            <div class="star"></div>
            <div class="star"></div>
            <!-- 更多的星球 -->
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

接下来，我们需要使用CSS来为这些星球添加样式，在styles.css文件中，我们可以设置星球的背景、大小、位置等属性，以及为宇宙添加一些基本的背景色和深度感。

body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
#universe {
    width: 100%;
    height: 100%;
    background: #000;
    perspective: 500px;
}
.galaxy {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.star {
    position: absolute;
    background: #fff;
    border-radius: 50%;
    opacity: 0.5;
    box-shadow: 0 0 5px #fff;
    animation: orbit 5s infinite linear;
}
/* 更多的CSS样式和动画 */

现在，我们已经为宇宙和星球设置了基本的样式，接下来需要使用JavaScript来实现星球的动态效果，在script.js文件中，我们将编写一个简单的动画，让星球围绕银河系中心旋转。

document.addEventListener('DOMContentLoaded', function() {
    var stars = document.querySelectorAll('.star');
    var galaxyCenter = document.querySelector('.galaxy').getBoundingClientRect().center;
    stars.forEach(function(star) {
        var radius = Math.random() * 200 + 50; // 随机设置星球与银河系中心的距离
        var angle = Math.random() * Math.PI * 2; // 随机设置星球的初始角度
        star.style.left = (galaxyCenter.x + radius * Math.cos(angle)) + 'px';
        star.style.top = (galaxyCenter.y + radius * Math.sin(angle)) + 'px';
        var orbitAnimation = {
            angle: 0
        };
        function updateOrbit() {
            orbitAnimation.angle += 0.01; // 更新星球的角度
            star.style.transform = 'translate(' + (galaxyCenter.x + radius * Math.cos(orbitAnimation.angle)) + 'px, ' + (galaxyCenter.y + radius * Math.sin(orbitAnimation.angle)) + 'px) rotate(' + (orbitAnimation.angle * 360) + 'deg)';
            requestAnimationFrame(updateOrbit);
        }
        updateOrbit();
    });
});

怎么用html做一个动态宇宙