一个"剑气"加载🌪️

这是我参与8月更文挑战的第29天，活动详情查看：8月更文挑战

🙇 前言

• 我们在网页加载的时候总会加上一些过渡效果来引导用户，减少白屏时间，而加载的效果可以用svg也可以使用一些我们封装好的组件,今天就来分享一种"剑气"加载效果。
• 相信大家看封面都知道效果了，那我们就直接开干吧。

🏋️‍♂️ToDoList

• 剑气形状
• 剑气转动
• 组合剑气

🚴 Just Do It

• 其实做一个这样的效果仔细看就是有三个类似圆环状的元素进行循环转动，我们只需要拆解出一个圆环来做效果即可，最后再将三个圆环组合起来。

剑气形状

• 仔细看一道剑气，它的形状是不是很像一把圆圆的镰刀分成一半，而这个镰刀我们可以通过边框和圆角来做。
• 首先准备一个剑气雏形。

  <div class="sword">
    <span>
  </div>

• 我们只需要对一个圆加上一个方向的边框就可以做成半圆的形状，这样类似剑气的半圆环形状就完成了🌪️。

.sword {
  position: relative;
  margin: 200px auto;
  width: 64px;
  height: 64px;
  border-radius: 50%;
}
.sword span{
  position: absolute;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border-radius: 50%;  
}
.sword :first-child{
  left: 0%;
  top: 0%;
  border-bottom: 3px solid #EFEFFA;
}

剑气转动

• 因为我们需要剑气一直不停的循环转动，所以我们可以借助css的animation动画属性就可以自己给它添加一个动画了。
• animation属性是一个简写属性，可以用于设置以下动画属性分别是：
  • animation-name：指定要绑定到选择器的关键帧的名称
  • animation-duration：动画指定需要多少秒或毫秒完成
  • animation-timing-function：设置动画将如何完成一个周期
  • animation-delay：设置动画在启动前的延迟间隔
  • animation-iteration-count：定义动画的播放次数
  • animation-direction：指定是否应该轮流反向播放动画
  • animation-fill-mode：规定当动画不播放时，要应用到元素的样式
  • animation-play-state：指定动画是否正在运行或已暂停
• 更多的动画学习可以参考MDN

...
.sword :first-child{
  ...
  animation: sword-one 1s linear infinite;
  ...
}
@keyframes sword-one {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
}
...

• 我们可以给定一个不断绕z轴0deg到360deg转动的动画，设定为一秒完成一次一直无限循环，我们来看看效果：

• 接下来让这个半圆弧分别绕x轴和y轴也转动一定角度即可完成一个剑气的转动。

...
@keyframes sword-one {
  0% {
    transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
  }
}
...

• 我们来看看完成后的效果：

组合剑气

• 最后我们只需要再制作两个剑气在组装起来就好了。

<div class="sword">
    <span></span>
    <span></span>
    <span></span>
  </div>

• 给新添的两个span添加动画和样式。

...
.sword :nth-child(2){
  right: 0%;
  top: 0%;
  animation: sword-two 1s linear infinite;
  border-right: 3px solid #EFEFFA;
}

.sword :last-child{
  right: 0%;
  bottom: 0%;
  animation: sword-three 1s linear infinite;
  border-top: 3px solid #EFEFFA;
}

@keyframes sword-two {
  0% {
    transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
  }
}

@keyframes sword-three {
  0% {
    transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
  }
}
...

• 这样我们的剑气加载效果就制作好了，以上就是全部代码了，喜欢的可以拿去用哟。
• 我们来看看最终的效果吧~

👋 写在最后

• 首先感谢大家看到这里，这次分享的是剑气加载效果，希望可以帮助到有需要的同学。
• 如果您觉得这篇文章有帮助到您的的话不妨🍉关注+点赞+收藏+评论+转发🍉支持一下哟~~😛您的支持就是我更新的最大动力。
• 如果想跟我一起讨论和学习更多的前端知识可以加入我的前端交流学习群，大家一起畅谈天下~~~

🌅 往期精彩

一个"水"按钮💧

产品经理：你能不能让词云动起来？

一文搞定echarts地图轮播高亮⚡

看完还分不清重绘和重排过来捶我👊，我说的！！！