阅读 703

WEB加载动画之粘连跑马灯

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动

本文同时参与 「掘力星计划」 ,赢取创作大礼包,挑战创作激励金

前言

本期我们分享一个Loading加载的跑马灯动画粘连效果,非常的简单且有趣,用在一些漫画风格的网页做加载动画十分适合。废话不多说我们先来看一下效果吧~

VID_20211012_163710.gif

感觉还不错吧,它没用任何一句js代码,仅仅靠几行css完成,是不是有点小激动,接下来我们就来讲讲它是如何制作完成的。

正文

html结构

<div class="loader">
    <div class="box"></div>
</div>
复制代码
  • .loader:表示圆环主容器
  • .box:表示内容容器,其中连个伪类before,after,我们分别会做文字跑马灯和波浪效果
html,
body {
  background-color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

:root{
    --main-color:rgb(255, 255, 255);
}

.loader {
  position: absolute;
  width: 240px;
  height: 240px;
  background-color: black;
  overflow: hidden;
}

.loader > .box {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 90%;
  height: 90%;
  border: 10px solid var(--main-color);
  overflow: hidden;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
  border-radius: 100%;
}
复制代码

我们将屏幕变黑,然后画一个白色圆环居中显示。

微信截图_20211012151923.png

文字跑马灯

.loader > .box::before {
  content: "Loading Loading Loading";
  position: absolute;
  top: 50%;
  left: 50%;
  color: var(--main-color);
  font-size: 60px;
  letter-spacing: 1px;
  font-weight: bolder;
  white-space: nowrap;
  transform: translate(100%, -50%);
  animation: marquee 4.25s infinite linear;
  text-shadow: 0px 60px 10px rgba(255, 255, 255, 0.6);
}
@keyframes marquee {
  from {
    transform: translate(-34%, -50%);
  }
  to {
    transform: translate(-68%, -50%);
  }
}
复制代码

我们在伪类before中通过content写入要循环的文字,然后我们通过计算translate去让其发生位移,然后循环使其达成跑马灯效果。别忘了再设置一个文字投影text-shadow,后面是提升粘连效果充当更多小波浪使用的。

微信截图_20211012152447.png

波浪

.loader > .box::after {
  content: "";
  position: absolute;
  bottom: -20px;
  left: 50%;
  margin-left: -20px;
  width: 40px;
  height: 30px;
  background: var(--main-color);
  border-radius: 50%;
  transform-origin: 50% -100px;
  transform: rotateZ(90deg);
  animation: rotate 8s 0.2s infinite linear;
}
@keyframes rotate {
  from {
    transform: rotateZ(0deg);
  }
  to {
    transform: rotateZ(360deg);
  }
}
复制代码

其实在圆环下发加一个小椭圆块,通过transform-origin设置数值其类似绕圆运动而非绕远自身原点转动,下面我们把他父容器的overflow: hidden先注释掉让其直白展示,让我们看看效果:

VID_20211012_160810.gif

这样就可以明显看到,刚刚写的小椭圆一直走绕圆运动,并且让他一直贴着下环的边,而远离上圆环的边,这样等我们后面做粘连效果的时候,就会看出一个小粘连波浪,如果问为啥上面不做波浪是因为重力啊水波浪飞不到天上的。另外,刚才文字投影可以在后面做粘连效果也能出现小波浪的动画。

粘连效果

我们要做的动画都完成了,接下来,我们就用过一句代码去让他呈现粘连效果。

.loader {
  /* .... */
  filter: blur(4px) contrast(20);
  /* .... */
}
复制代码

我们只要在其主容器上放置filter属性,这算是一个css技巧,相当于做了差值模糊处理,数值得当就可以看到相近元素产生了粘连。

VID_20211012_163710.gif

我们可以发现,不光小椭圆变成了波浪,连文字产生的投影也变成了小波浪,就是这么神奇。


讲到这里,我们已经完成了这个案例,在线演示

结语

我们通过这个加载动画的案例学习到了么,他有很多css技巧在里面,比如说跑马灯,文字投影,绕圆运动,粘连效果这些组合在一起就非常有趣了,你也可以发挥想象完成更有趣的动画效果哦~

文章分类
前端
文章标签