这是一个使用HTML、CSS和JavaScript创建的太阳系模拟动画，展示了太阳、地球和月亮的运动轨迹。动画中，地球带有月球，并且两者都围绕太阳进行旋转。通过这段代码，可以了解网页动画的基本实现原理。
<style>
body{
width: 100%;
height: 100vh;
margin: 0;
padding: 0;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
background-color: black;
}
.container{
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.sun{
position: absolute;
width: 200px;
height: 200px;
background-color: yellow;
border-radius: 50%;
box-shadow: 0 0 5rem #fff, 0 0 5rem #fff;
}
.earth{
position: absolute;
width: 500px;
height: 500px;
/* background-color: aqua; */
border-radius: 50%;
border-style: solid solid none none;
border-color: silver transparent transparent transparent;
border-width: 0.1rem;
animation: move 36.5s linear infinite;
}
.earth::before{
content: '';
width: 50px;
height: 50px;
background-color: blue;
position: absolute;
top: 50px;
right: 50px;
border-radius: 50%;
}
.moon{
position: absolute;
width: 120px;
height: 120px;
top: 12px;
right: 12px;
/* background-color: aqua; */
border-radius: 50%;
border-style: solid solid none none;
border-color: silver transparent transparent transparent;
border-width: 0.1rem;
animation: move 24s linear infinite;
}
.moon::before{
content: '';
width: 30px;
height: 30px;
background-color: rgb(48, 48, 51);
position: absolute;
top: 0px;
right: 0px;
border-radius: 50%;
}
@keyframes move{
to{
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="container">
<div class="sun"></div>
<div class="earth">
<div class="moon"></div>
</div>
</div>
</body>
</html>
扫一扫
7877
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
