「兔了个兔」创意投稿大赛——卯兔创意加载页

我正在参加「兔了个兔」创意投稿大赛，详情请看：「兔了个兔」创意投稿大赛

开篇

加载页是每个网站都必不可少的组件之一，一个好看的加载页也能提高网站的用户体验。今天就结合卯兔元素在加载页上做下文章，写一个给人耳目一新的加载页。

首先，依然是放一下效果图

附上码上掘金的调试源码：

下面开始实现它。

思路

首先分析一下页面构成，得有img和三个旋转的白线以及下面滚动而过的字体。三个白线就用单边框上色并弯曲实现，下面的文字把每个字母都给拆开依次赋予动画并设置好动画延迟时间即可。

开始实现

HTML

HTML的结构很明晰了，正如上文思路中所说的那些元素。

<div id="loader-wrapper">
  <div id="loader"><img style="height: 100%; width: 100%;" src="./兔子.png"></div>
</div>
<div class="loader">
  <div> L </div>
  <div> O </div>
  <div> A </div>
  <div> D </div>
  <div> I </div>
  <div> N </div>
  <div> G </div>
  <div> </div>
  <div> </div>
  <div> </div>
</div>

CSS

css部分首先是布局，把那些东西放到该放的位置，

#loader-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  overflow: hidden;
}

#loader {
  display: flex;
  position: relative;
  left: 50%;
  top: 50%;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #fff;
  animation: spin 1.7s linear infinite;
  z-index: 11;
}

之后是背景的动画效果，这个动画靠不断的实现背景移动来实现。

@keyframes bg {
  50% {
    background-position: 100% 0
  }
}

然后是白线的旋转，把最内侧和最外侧的白线设置成一个方向，中间的反向，并且设置好延迟的时间即可。

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes spin-reverse {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}

最后是每个字母的旋转跳跃，依然是动画，开始的设置旋转180放到最后边并透明，然后随着左移，旋转慢慢置0并把透明度置1，到结束的时候把旋转置反向180，透明，就欧克了。

@keyframes move {
  0% {
    right: 0;
    opacity: 0
  }
  35% {
    right: 41%
  }
  35%,
  65% {
    transform: rotate(0);
    opacity: 1
  }
  65% {
    right: 59%
  }
  to {
    right: 100%;
    transform: rotate(-180deg)
  }
}

到此，卯兔创意加载页就基本完成了。

我也同步在码上掘金上发布了这个代码，喜欢的话可以去看看。 兔了个兔（八） - 码上掘金 (juejin.cn)

最后，一个小请求，麻烦各位看官动动手指点个赞吧！！！