css动画小案例（太阳地球月球运动轨迹）

啊啊啊啊啊威

已于 2022-11-07 17:35:06 修改

阅读量2.8k

点赞数 8

文章标签： css 前端 html

于 2022-09-27 14:34:57 首次发布

本文链接：https://blog.csdn.net/zhangawei123/article/details/126932183

版权

该博客介绍了如何使用CSS动画来模拟太阳、地球和月球的运动轨迹。通过分析结构，设置CSS样式和动画，实现了地球围绕太阳旋转，月球围绕地球旋转的效果。在鼠标悬停时，动画会激活，展示动态的天体运动。文章鼓励读者尝试创建更复杂的星系动画。

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

效果展示：

1.结构分析

既然是用动画实现太阳地球月球的轨迹，那必然是太阳居中，地球围绕太阳转，与此同时月球围绕地球转，如下图（嘿嘿，凑合看吧），就应该使用一个大盒子（div），作为背景的太空，然后是太阳和地球，再把月亮嵌套进地球里面。以下代码使用汉语拼音来写类名，方便区分。

<div>
        <div class="beijing">
            <div class="taiyang"></div>
            <div class="diqiu">
                <div class="yueqiu"></div>

最低0.47元/天解锁文章