请你用html制作太阳系的小动画,要求1. 各个行星都能围绕太阳按照各自的轨道进行旋转; 2. 要求各个轨道的旋转速度不一样; 3. 图中有个别行星也有自己的小行星,该小行星也可以围绕它进行旋转;:例如月球绕着地球转
时间: 2024-03-17 17:45:22 浏览: 12
以下是一个简单的 HTML 太阳系动画代码,用于展示太阳系中各个行星的旋转:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>太阳系动画</title>
<style>
* {
box-sizing: border-box;
}
#sun {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: yellow;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.planet {
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: gray;
}
.moon {
position: absolute;
width: 5px;
height: 5px;
border-radius: 50%;
background-color: white;
}
#mercury {
top: 30%;
left: 45%;
animation: spin 5s linear infinite;
}
#venus {
top: 35%;
left: 40%;
animation: spin 7s linear infinite;
}
#earth {
top: 40%;
left: 35%;
animation: spin 9s linear infinite;
}
#mars {
top: 45%;
left: 30%;
animation: spin 11s linear infinite;
}
#jupiter {
top: 50%;
left: 25%;
width: 30px;
height: 30px;
background-color: orange;
animation: spin 13s linear infinite;
}
#saturn {
top: 55%;
left: 20%;
width: 25px;
height: 25px;
background-color: brown;
border: 2px solid gray;
border-radius: 50%;
animation: spin 15s linear infinite;
}
#uranus {
top: 60%;
left: 15%;
width: 20px;
height: 20px;
background-color: lightblue;
animation: spin 17s linear infinite;
}
#neptune {
top: 65%;
left: 10%;
width: 20px;
height: 20px;
background-color: blue;
animation: spin 19s linear infinite;
}
#moon {
top: 43%;
left: 32%;
animation: spin 1s linear infinite;
transform-origin: 50% 180%;
}
</style>
</head>
<body>
<div id="sun"></div>
<div id="mercury" class="planet"></div>
<div id="venus" class="planet"></div>
<div id="earth" class="planet">
<div id="moon" class="moon"></div>
</div>
<div id="mars" class="planet"></div>
<div id="jupiter" class="planet"></div>
<div id="saturn" class="planet"></div>
<div id="uranus" class="planet"></div>
<div id="neptune" class="planet"></div>
</body>
<script>
function rotate(el, deg) {
el.style.transform = `rotate(${deg}deg)`;
}
function animate() {
const moon = document.getElementById('moon');
const earth = document.getElementById('earth');
const earthAngle = 1;
const moonAngle = 6;
rotate(earth, earthAngle);
rotate(moon, moonAngle);
setTimeout(() => {
animate();
}, 50);
}
animate();
</script>
<style>
@keyframes spin {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
</style>
</html>
```
这个代码使用了 HTML、CSS 和 JavaScript 来实现太阳系的动画效果。在页面中,我们使用一个黄色的圆形表示太阳,并使用灰色的圆形表示行星。每个行星都有一个唯一的 ID,使我们可以在 CSS 中通过 ID 来为每个行星设置位置和样式。每个行星都有一个 spin 动画,使它可以围绕太阳按照各自的轨道进行旋转,并且每个轨道的旋转速度不一样。月球绕着地球转的效果是通过 JavaScript 来实现的,我们为地球和月球设置了一个旋转角度,然后每隔一段时间就更新一次旋转角度,从而实现了动画效果。