从 HTML 开始探索太阳系的奥秘

2023-10-01 09:47:32

使用HTML与CSS构建动态效果

在网页开发中，利用HTML和CSS技术来呈现视觉动态效果是一种常见的方法。通过这种方式，可以生动地展示太阳系行星围绕太阳旋转的现象，使用户能够直观地感受到天体运动的魅力。

创建基础结构

首先，需要创建一个包含太阳及其行星的HTML页面框架。这里以水星为例，构建整个太阳系的基础布局。

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>探索太阳系</title>
<style>
    /* 定义太阳和行星的基本样式 */
    .sun {
        width: 100px;
        height: 100px;
        background-color: yellow;
        border-radius: 50%;
        position: absolute;
        top: calc(50% - 50px);
        left: calc(50% - 50px);
    }
    
    .planet {
        width: 20px;
        height: 20px;
        background-color: #3498db;
        border-radius: 50%;
        position: absolute;
        animation: orbit 10s linear infinite; /* 设置轨道动画 */
    }

    @keyframes orbit {
        from { transform: rotate(0deg) translateX(200px) rotate(0deg); }
        to   { transform: rotate(360deg) translateX(200px) rotate(-360deg); }
    }
</style>
</head>
<body>
<div class="sun"></div> <!-- 太阳 -->
<div class="planet mercury" style="top: calc(50% - 110px); left: calc(50% + 90px);"></div> <!-- 水星位置 -->
<script src="script.js"></script>
</body>
</html>

CSS动画：模拟行星运动

在CSS中，使用@keyframes规则定义了行星的轨道运动。通过调整animation-duration属性值可以改变各行星绕太阳公转的速度，实现不同的视觉效果。

.planet {
    /* 略去其他样式 */
    animation: orbit 10s linear infinite; 
}

@keyframes orbit {
    from { transform: rotate(0deg) translateX(200px) rotate(0deg); }
    to   { transform: rotate(360deg) translateX(200px) rotate(-360deg); }
}

这里的动画效果利用了CSS 3D变换技巧，结合rotate和translate函数来创建行星绕太阳运动的错觉。通过调整轨道半径（即translateX参数值）可以模拟不同距离上的行星公转轨迹。

动态加载更多行星

为了让页面更加生动有趣，可以在用户操作下动态添加其他行星。使用JavaScript实现此功能：

function addPlanet(name, distanceFromSun) {
    var planet = document.createElement('div');
    planet.className = 'planet';
    planet.style.top = `calc(50% - ${distanceFromSun + 10}px)`;
    planet.style.left = `calc(50% + ${distanceFromSun}px)`;
    
    if (name === "venus") {
        planet.classList.add("venus");
    }
    document.body.appendChild(planet);
}

// 添加金星
addPlanet('venus', 280); // 调整距离，以模拟不同行星轨道。