前言
最近在浏览网页的时候，无意间看到了一款游戏中的日食效果。虽然它看起来是日食，但是实际上可以认为是一个被改造过的加载动画。于是我便想着用纯CSS来实现这个日食效果，将它还原出来。
话不多说，先来看一下关于今天要实现的这个效果的预览吧。
效果预览
以上就是整个效果的预览状态，整个效果有点类似于日食，中间一圈黑色，向外散发着太阳般的光芒。接下来将带大家来实现它。
效果还原
其实这个日食效果实现起来很简单，在HTML部分我们只需要构建一行代码即可，剩下的通过CSS来实现。
<div class="sun"></div>
CSS
要模拟逼真的日食，首先我们将背景颜色置为对应的颜色，相关代码如下所示。
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-image: linear-gradient(30deg, #182c51, #09101e);
overflow: hidden;
}
这里除了设定好对应的背景颜色，设置背景图片为线性渐变。渐变角度为 30 度，颜色从 #182c51 渐变到 #09101e，也通过flex布局将整个容器中的元素居中显示。
接下来就是为sun元素添加相关样式了。
.sun {
width: 256px;
height: 256px;
border-radius: 50%;
position: relative;
background-image: linear-gradient(30deg, #13223f, #0e1a30);
}
sun元素就是太阳，这里我们创建了一个圆形的太阳，其大小为 256 像素，并使用线性渐变作为其背景，渐变从 30 度角度开始，由颜色 #13223f 渐变到颜色 #0e1a30。
要实现日食的效果，动画必不可少，然后还需要添加一个伪元素，这里的伪元素相当于第二个太阳。
.sun::before {
content: "";
background-color: #c7938b;
position: absolute;
height: 100%;
width: 100%;
border-radius: 50%;
z-index: -1;
animation: 3.2s cresent linear infinite alternate;
}
@keyframes cresent {
0% {
transform: translate(-30px, 30px) scale(0.9);
box-shadow: none;
}
50% {
transform: translate(0px, 0px) scale(1.02);
box-shadow: 0 0 10px #f9f3f2, 0 0 80px 8px #c7938b;
background-color: #efdbd8;
}
100% {
transform: translate(30px, -30px) scale(0.9);
box-shadow: none;
}
}
上面是伪元素和动画的相关代码，在这里我们创建一个动画效果，.sun::before 是一个伪元素选择器，表示在前面提到的 sun 元素之前创建一个伪元素。content: ""; 表示伪元素的内容为空，这个是创建伪元素的必填项。紧接着设置好伪元素的背景颜色、定位方式、高度、宽度以及半径等相关属性。最后再通过 animation: 3.2s cresent linear infinite alternate; 设置动画，包括动画名称、持续时间、时间函数、循环次数和动画播放方式。
@keyframes cresent 定义了一个名为 cresent 的关键帧动画。0% 表示动画开始的状态。50% 表示动画进行到一半的状态。100% 表示动画结束的状态。
在动画开始的 0% 时间点，元素将向左上方移动 30 像素，同时缩小为原来的 0.9 倍，并且没有阴影效果。
在动画进行到 50% 的时间点，元素将回到原始位置，同时放大为原来的 1.02 倍，添加一个白色的 10 像素阴影和一个粉色的 80 像素阴影，并且背景颜色变为淡粉色。
在动画结束的 100% 时间点，元素将向右下方移动 30 像素，同时缩小为原来的 0.9 倍，并且没有阴影效果。
通过这段代码，便可以实现一个太阳动画效果，也就是日食效果。
总结
好了，本文到此结束，以上就是整个日食效果的实现过程了，代码比较简单，没有很复杂的逻辑处理部分，主要是通过CSS中的动画来实现。关于该效果如果大家有更好的想法欢迎在评论区分享，互相学习。最后，该效果的完整代码在码上掘金里可以查看，如果有什么问题大家在评论区里讨论~
原文链接：https://juejin.cn/post/7336103732139098123 作者：一条会coding的Shark
