手把手教你实现简单的日食效果

前言

最近在浏览网页的时候,无意间看到了一款游戏中的日食效果。虽然它看起来是日食,但是实际上可以认为是一个被改造过的加载动画。于是我便想着用纯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

(0)
上一篇 2024年2月17日 下午4:21
下一篇 2024年2月18日 上午10:05

相关推荐

发表评论

登录后才能评论