跳動的“loading”，個個都很驚豔！

搞前端的半夏發表於2022-05-14

大家好，我是半夏?，一個剛剛開始寫文的沙雕程式設計師.如果喜歡我的文章，可以關注➕ 點贊 ? 加我微信：frontendpicker，一起學習交流前端，成為更優秀的工程師～關注公眾號：搞前端的半夏,瞭解更多前端知識! 點我探索新世界！

原文連結 ==>http://sylblog.xin/archives/72

前言

喜歡的求個免費的贊

為什麼會寫這種文章呢？平時開發的時候，我們遇到載入，要麼是 UI 框架中自帶，要麼就是百度，然後 CV 到專案中？但是，自己實現的時候，又會沒有思路。久而久之，變成了 CV 工程師。本文針對不同的載入方式，講解其中的思路，希望大家不只是會用，更要是會寫。實踐才能出真知。

本文只介紹loading 文字載入。其他的會在其他文章中介紹。

loader-1

實現邏輯

仔細觀察：文字的顏色是從底部往上面變化。有點像水波紋載入的效果。但是其實實現是很簡單的。先給大家看一個例子。

div{
  font-size:30px;
  height:20px;
  overflow: hidden;
}
<div>content</div>

這樣最終的效果：文字只出現了一半。

那麼大家的思路是不是就出來了。是不是隻要有兩個重疊的 div 一個紅色的字，一個白色的字。用動畫讓白色字 div 的高度逐漸減少，是不是就可以實現這個效果。沒錯，是可以。

不過，我們只需要一個 div 也可以幹成這件事。:after 或者:before 也可以幹成這件事。

動畫該如何設計呢；其實很簡單設定高度從 100% 到 0 就可以了。

  @keyframes loaderHeight {
    0% {
      height: 100%;
    }
    100% {
      height: 0%;
    }
  }

完整程式碼

首先定義一個文字顏色為紅色的底。

.loader-1 {
    font-size: 48px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    color: #FF3D00;
    letter-spacing: 2px;
    position: relative;
}
<span class="loader-1">Loading</span>

然後利用:after 加上上層。

.loader-1::after {
    content: "Loading";
    position: absolute;
    left: 0;
    top: 0;
    color: #FFF;
    width: 100%;
    height: 50%;
    overflow: hidden;
    animation: loaderHeight 6s linear infinite;
}

這就是高度為 50%的效果。加上動畫的效果，在開始已經展示。

loader-2

實現邏輯

最簡單的：laoder-1 是從下往上，這個就是從左往右，那不就和 width 有關嗎？

不過這裡還有另一個點。那就是文字的效果。底層文字是有陰影的。看上去中間是空心的，其實不是，這只是因為背景顏色和文字本身的顏色一致。
我換個顏色，就清楚了。

在 CSS 中文字的陰影是 text-shadow。

text-shadow: 0 0 2px #fff, 0 0 1px #fff, 0 0 1px #fff;

動畫在這裡就很簡單了，loader-1 控制了 height,這裡控制 width 就可以了。

  @keyframes loderWidth {
    0% {
      width: 0%;
    }
    100% {
      width: 100%;
    }
  }

完整程式碼

.loader-2{
    font-size: 48px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    color: #263238;
    text-shadow: 0 0 2px #fff, 0 0 1px #fff, 0 0 1px #fff;
    letter-spacing: 2px;
    position: relative;
}
<span class="loader-2">Loading </span>
.loader-2::after {
    content: "Loading";
    position: absolute;
    left: 0;
    top: 0;
    color: #FFF;
    width: 100%;
    height: 100%;
    overflow: hidden;
    animation: loderWidth 6s linear infinite;
}

loader-3


這是我覺得最有創意的文字載入了！！！

實現邏輯

仔細觀察，有幾個點要特別注意。

  • 字母 L，那條會動的大寫 L,有沒有覺得拐角很不自然，其實上面那個 I 並不是 L 的，而是單獨的，只是在上面一層。
  • 字母 I,仔細看後面的字母 I,他是動態變化的，但是它的這個動，也不是整個運動的，只有上面的一點點在動。
  • 小球：小球是運動的，當小球到字母的位置，字母才會動。

最後我拆分一下。

分解完了，我們來研究一下怎麼做。我們們不考慮其他的比如增加 div 之類的，就單純的用:after 和:before 來實現。這裡有人可能會說了，你這裡有四個多出來的，只有兩個標籤怎麼實現？很簡單，元素本身確實只有一個，但是元素可以增加很多內容啊。比如 border，陰影之類的。

講到這裡，是不是有點思路了，你看啊，1 和 2 是不是可以用陰影實現啊，3 和 4 用 after 和 before 實現。

完整程式碼

這裡用了一個空格來佔位。

<span class="loader-3">Load&nbsp;ng </span>
.loader-3 {
  color: #FFF;
  position: relative;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 48px;
  letter-spacing: 4px;
}

下面是 before

  .loader-3::before {
    content: "";
    position: absolute;
    right: 70px;
    bottom: 10px;
    height: 28px;
    width: 5.15px;
    background: currentColor;
    animation: loaderL 1s linear infinite alternate;

  }

效果如下，可以看到 3 已經出來了，但是 1 和 2 並沒有出現，這是因為我們還沒有加上陰影。

加上這個動畫，我們就可以看到效果了。

  @keyframes loaderL {
    0% {
      box-shadow: 0 -6px, -122.9px -8px;
    }
    25%, 75% {
      box-shadow: 0 0px, -122.9px -8px;
    }
    100% {
      box-shadow: 0 0px, -122.9px -16px;
    }
  }


加上小球

.loader-3::after {
    content: "";
    width: 10px;
    height: 10px;
    position: absolute;
    left: 125px;
    top: 2px;
    border-radius: 50%;
    background: red;
    animation: animloader113 1s linear infinite alternate;
  }

最後加上小球的動畫。

 @keyframes animloader113 {
    0% {
      transform: translate(0px, 0px) scaleX(1);
    }
    14% {
      transform: translate(-12px, -16px) scaleX(1.05);
    }
    28% {
      transform: translate(-27px, -28px) scaleX(1.07);
    }
    42% {
      transform: translate(-46px, -35px) scaleX(1.1);
    }
    57% {
      transform: translate(-70px, -37px) scaleX(1.1);
    }
    71% {
      transform: translate(-94px, -32px) scaleX(1.07);
    }
    85% {
      transform: translate(-111px, -22px) scaleX(1.05);
    }
    100% {
      transform: translate(-125px, -9px) scaleX(1);
    }
  }

loader-4

實現邏輯

仔細觀看，兩個點；

  • 文字在陰影的狀態下傾斜。
  • 文字變模糊

CSS中傾斜： transform: skew()

CSS模糊：高斯模糊 filter: blur(0px)

完整程式碼

<span class="loader-4">Loading </span>
.loader-119 {
    font-size: 48px;
    letter-spacing: 2px;
    color: #FFF;
    animation: loader4 1s ease-in infinite alternate;
}

動畫

 @-webkit-keyframes loader4 {
    0% {
      filter: blur(0px);
      transform: skew(0deg);
    }
    100% {
      filter: blur(3px);
      transform: skew(-4deg);
    }
  }

相關文章