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

目录

效果展示：

​编辑

1.结构分析

2.css样式

     3.动画设置

---

效果展示：

1.结构分析

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

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

2.css样式

然后先给背景，太阳，地球，月亮四个盒子分别设置自己的样式，将其设置为下面图片显示的情况(太阳居于中心的红色，黄色的