如何利用 CSS 动画原理，在页面上表现日蚀现象

野性酷女 2022-04-15 05:46 39阅读 0赞

![1504257-20181122112405014-364235681.png][]

## 效果预览 ##

[在线演示][Link 1]

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

[https://codepen.io/comehope/pen/OELvrK][https_codepen.io_comehope_pen_OELvrK]

## 可交互视频教程 ##

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

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

[https://scrimba.com/p/pEgDAM/cgnzMAz][https_scrimba.com_p_pEgDAM_cgnzMAz]

## 源代码下载 ##

[本地下载][Link 2]

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

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

## 代码解读 ##

定义 dom，一个名为 sky 的容器，其中包含一个 sun 元素和一个 moon 元素：

画出天空：

body {
        margin: 0;
    }
    
    .sky {
        width: 100vw;
        height: 100vh;
        background-color: skyblue;
    }

画出太阳：

.sky {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }
    
    .sun {
        position: absolute;
        width: 50vmin;
        height: 50vmin;
        border-radius: 50%;
        background-color: gold;
    }

画出月亮：

.moon {
        position: absolute;
        width: 50vmin;
        height: 50vmin;
        border-radius: 50%;
        background-color: slategray;
        transform: translateX(-55vmin);
    }

定义天空的变化，当日蚀来临时天空会变黑：

@keyframes animate-sky {
        50% {
            background-color: black;
        }
    }

定义太阳的变化，当日蚀来临时太阳虽会被遮挡，但光晕仍会透出：

@keyframes animate-sun {
        50% {
            box-shadow: 0 0 5em 1em white;
        }
    }

定义月亮的动画，当它运动到和太阳重叠的位置时，因为没有光，就看不到它的颜色了：

@keyframes animate-moon {
        from {
            transform: translateX(-100vmin);
        }
    
        50% {
            background-color: black;
        }
    
        to {
            transform: translateX(100vmin);
        }
    }

把动画应用到元素上：

.sky,
    .sun,
    .moon {
        animation: 10s linear infinite;
    }
    
    .sky {
        animation-name: animate-sky;
    }
    
    .sun {
        animation-name: animate-sun;
    }
    
    .moon {
        animation-name: animate-moon;
    }

最后，隐藏滚动条：

.sky {
        overflow: hidden;
    }

大功告成！

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

[1504257-20181122112405014-364235681.png]: /images/20220415/586a531b325f475d8ac546f6d2e8efc6.png
[Link 1]: https://www.jqhtml.com/yanshi?demourl=%2Fwp-content%2Fuploads%2F2018%2F11%2Ffront-end-daily-challenges-master%2F036-solar-eclipse&demotitle=CSS%E7%94%BB%E5%87%BA%E6%97%A5%E8%9A%80%E7%8E%B0%E8%B1%A1
[https_codepen.io_comehope_pen_OELvrK]: https://codepen.io/comehope/pen/OELvrK
[https_scrimba.com_p_pEgDAM_cgnzMAz]: https://scrimba.com/p/pEgDAM/cgnzMAz
[Link 2]: http://www.jqhtml.com/19297.html
[https_github.com_comehope_front-end-daily-challenges]: https://github.com/comehope/front-end-daily-challenges