太阳系

最新推荐文章于 2022-03-26 09:28:55 发布

ououyangxiaolin

最新推荐文章于 2022-03-26 09:28:55 发布

阅读量161

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/ououyangxiaolin/article/details/103101172

本文介绍了一种使用纯CSS实现太阳系行星运动的动画效果，详细展示了如何通过CSS的transform和animation属性来模拟各行星绕太阳公转的过程。文章包含了完整的代码示例，适合前端开发者学习和参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Document

}
.mercuryOrbit{
width: 180px;
height: 180px;
border: 1px solid #cccccc;
top: calc(50% - 90px);
left: calc(50% - 90px);
}
.mercury{
width: 10px;
height: 10px;
background-color:goldenrod;
top: calc(50% - 5px);
left: calc(50% - 95px);
/* 围绕圆心转动 */
transform-origin: 95px 5px;
animation: rotate 2s linear infinite;
}
.venusOrbit{
width: 240px;
height: 240px;
border: 1px solid #ffffff;
top: calc(50% - 120px);
left: calc(50% - 120px);
}
.venus{
width: 20px;
height: 20px;
background-color:gold;
top: calc(50% - 10px);
left: calc(50% - 130px);
transform-origin: 130px 10px;
animation: rotate 3.5s linear infinite;
}
.earthOrbit{
width: 320px;
height: 320px;
border: 1px solid #cccccc;
top: calc(50% - 160px);
left: calc(50% - 160px);
}
.earth{
width: 20px;
height: 20px;
background-color:dodgerblue;
top: calc(50% - 10px);
left: calc(50% - 170px);
transform-origin: 170px 10px;
animation: rotate 8s linear infinite;
}
.marsOrbit{
width: 400px;
height: 400px;
border: 1px solid #cccccc;
top: calc(50% - 200px);
left: calc(50% - 200px);
}
.mars{
width: 10px;
height: 10px;
background-color:goldenrod;
top: calc(50% - 5px);
left: calc(50% - 205px);
transform-origin: 205px 5px;
animation: rotate 15s linear infinite;
}
.jupiterOrbit{
width: 480px;
height: 480px;
border: 1px solid #cccccc;
top: calc(50% - 240px);
left: calc(50% - 240px);
}
.jupiter{
width: 40px;
height: 40px;
background-color:lightcoral;
top: calc(50% - 20px);
left: calc(50% - 260px);
transform-origin: 260px 20px;
animation: rotate 30s linear infinite;
}
.saturnOrbit{
width: 580px;
height: 580px;
border: 1px solid #cccccc;
top: calc(50% - 290px);
left: calc(50% - 290px);
}
.saturn{
width: 30px;
height: 30px;
background-color:greenyellow;
top: calc(50% - 15px);
left: calc(50% - 305px);
transform-origin: 305px 15px;
animation: rotate 50s linear infinite;
}
.uranusOrbit{
width: 660px;
height: 660px;
border: 1px solid #cccccc;
top: calc(50% - 330px);
left: calc(50% - 330px);
}
.uranus{
width: 30px;
height: 30px;
background-color:#ccc;
top: calc(50% - 15px);
left: calc(50% - 345px);
transform-origin: 345px 15px;
animation: rotate 200s linear infinite;
}
.neptuneOrbit{
width: 760px;
height: 760px;
border: 1px solid #cccccc;
top: calc(50% - 380px);
left: calc(50% - 380px);
}
.neptune{
width: 20px;
height: 20px;
background-color:goldenrod;
top: calc(50% - 10px);
left: calc(50% - 390px);
transform-origin: 390px 10px;
animation: rotate 500s linear infinite;
}

            <!--水星轨道-->
            <div class='mercuryOrbit'></div>
        
            <!--水星-->
            <div class='mercury'></div>
        
            <!--金星轨道-->
            <div class='venusOrbit'></div>
        
            <!--金星-->
            <div class='venus'></div>
        
            <!--地球轨道-->
            <div class='earthOrbit'></div>
        
            <!--地球-->
            <div class='earth'></div>
        
            <!--火星轨道-->
            <div class='marsOrbit'></div>
        
            <!--火星-->
            <div class='mars'></div>
        
            <!--木星轨道-->
            <div class='jupiterOrbit'></div>
        
            <!--木星-->
            <div class='jupiter'></div>
        
            <!--土星轨道-->
            <div class='saturnOrbit'></div>
        
            <!--土星-->
            <div class='saturn'></div>
        
            <!--天王星轨道-->
            <div class='uranusOrbit'></div>
        
            <!--天王星-->
            <div class='uranus'></div>
        
            <!--海王星轨道-->
            <div class='neptuneOrbit'></div>
        
            <!--海王星-->
            <div class='neptune'></div>
        </div>

–>