纯 CSS 创作一个太阳、地球、月亮的运转模型

╰+哭是因爲堅強的太久メ 2022-04-13 03:18 188阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNzgxOTE1MjA_size_16_color_FFFFFF_t_70]

## 效果预览 ##

[在线演示][Link 1]

按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以全屏预览。

[https://codepen.io/comehope/pen/RJjQYY][https_codepen.io_comehope_pen_RJjQYY]

## 可交互视频 ##

此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。

请用 chrome, safari, edge 打开观看。

[https://scrimba.com/p/pEgDAM/cLQLyTR][https_scrimba.com_p_pEgDAM_cLQLyTR]

## 源代码下载 ##

[本地下载][Link 2]

每日前端实战系列的全部源代码请从 github 下载：

[https://github.com/comehope/front-end-daily-challenges][https_github.com_comehope_front-end-daily-challenges]

## 代码解读 ##

定义dom，容器中包含 3 个元素：

居中显示：

body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: black;
    }

定义容器尺寸：

.container {
        font-size: 10px;
        width: 40em;
        height: 40em;
        position: relative;
    }

画出太阳：

.sun {
        position: absolute;
        top: 15em;
        left: 15em;
        width: 10em;
        height: 10em;
        background-color: yellow;
        border-radius: 50%;
        box-shadow: 0 0 3em white;
    }

画出地球和月球的轨迹：

.earth,
    .moon  {
        position: absolute;
        border-style: solid;
        border-color: white transparent transparent transparent;
        border-width: 0.1em 0.1em 0 0;
        border-radius: 50%;
    }
    
    .earth {
        top: 5em;
        left: 5em;
        width: 30em;
        height: 30em;
    }
    
    .moon {
        top:0;
        right: 0;
        width: 8em;
        height: 8em;
    }

用伪元素画出地球和月球：

.earth::before,
    .moon::before {
        position: absolute;
        border-radius: 50% ; 
      content: '';
    }
    
    .earth::before {
        top: 2.8em;
        right: 2.5em;
        height: 3em;
        width: 3em;
        background-color: aqua;
    }
    
    .moon::before {
        top: 0.8em;
        right: 0.2em; 
        width: 1.2em;
        height: 1.2em;
        background-color: silver;
    }

设置运转动画效果：

/* rotation period 365.2422 days */
    .earth {
        animation: orbit 36.5s linear infinite;   
    }
    
    /* rotation period 27.322 days */
    .moon {
        animation: orbit 2.7s linear infinite;
    }
    
    @keyframes orbit {
        to {
            transform: rotate(360deg);
        }
    }

最后，隐藏可能会出现在容器外的部分：

body {
        overflow: hidden;
    }

大功告成！

原文地址：https://segmentfault.com/a/1190000015313341

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNzgxOTE1MjA_size_16_color_FFFFFF_t_70]: /images/20220413/6d77f7c94b2d459484f90c8c49baa48c.png
[Link 1]: https://www.jqhtml.com/yanshi?demourl=%2Fwp-content%2Fuploads%2F2018%2F11%2Ffront-end-daily-challenges-master%2F055-sun-earth-and-moon-model&demotitle=%E7%BA%AF%20CSS%20%E5%88%9B%E4%BD%9C%E4%B8%80%E4%B8%AA%E5%A4%AA%E9%98%B3%E3%80%81%E5%9C%B0%E7%90%83%E3%80%81%E6%9C%88%E4%BA%AE%E7%9A%84%E8%BF%90%E8%BD%AC%E6%A8%A1%E5%9E%8B
[https_codepen.io_comehope_pen_RJjQYY]: https://codepen.io/comehope/pen/RJjQYY
[https_scrimba.com_p_pEgDAM_cLQLyTR]: https://scrimba.com/p/pEgDAM/cLQLyTR
[Link 2]: http://www.jqhtml.com/19363.html
[https_github.com_comehope_front-end-daily-challenges]: https://github.com/comehope/front-end-daily-challenges