跳動的“loading”，個個都很驚艷

言

喜歡的求個免費的贊

為什么會寫這種文章呢？平時開發的時候，我們遇到加載，要么是 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 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);
    }
  }

原文來源：https://blog.csdn.net/shangyanaf/article/details/124836122?spm=1000.2115.3001.6382&utm_medium=distribute.pc_feed_v2.none-task-blog-hot-6-124836122-null-null.pc_personrec&depth_1-utm_source=distribute.pc_feed_v2.none-task-blog-hot-6-124836122-null-null.pc_personrec

“做程序員，圈子和學習最重要”因為有有了圈子可以讓你少走彎路，擴寬人脈，擴展思路，學習他人的一些經驗及學習方法！同時在這分享一下是一直以來整理的Java后端進階筆記文檔和學習資料免費分享給大家！需要資料的朋友私信我扣【06】

言

“字節跳動”現今也是如日中天，旗下產品，除頭條外，還有短視頻平臺“抖音”，人氣也是非常高，據說擁有7億用戶。

今天我們就來研究研究抖音的logo，蹭蹭熱度。

效果預覽：

CSS3動畫解析抖音 LOGO制作

章出處：趣味CSS3效果挑戰小匯總

挑戰1: 畫一個對話框

要畫一個對話框，首先來學習做一個三角形。其實非常的簡單。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <style>
 .triangle{
 width: 0;
 height: 0;
 border: 50px solid;
 border-color: #f00 #0f0 #ccc #00f;
 }
 </style>
</head>
<body>
 <div class="triangle"></div>
</body>
</html>

出現如下效果：

估計你已經知道border的構成原理，然后只需改一行代碼：

// 四個參數對應 ：上 右 下 左
border-color: transparent transparent #ccc transparent;

于是就只剩下面的三角形部分啦！

現在來利用三角形技術做對話框：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <style>
 .dialog {
 position: relative;
 margin-top: 50px;
 margin-left: 50px;
 padding-left: 20px;
 width: 300px;
 line-height: 2;
 background: lightblue;
 color: #fff;
 }
 .dialog::before {
 content: '';
 position: absolute;
 border: 8px solid;
 border-color: transparent lightblue transparent transparent;
 left: -16px;
 top: 8px;
 }
 </style>
</head>
<body>
 <div class="dialog">這是一個對話框鴨！</div>
</body>
</html>

效果如下：

挑戰2: 畫一個平行四邊形

利用skew特性，第一個參數為x軸傾斜的角度，第二個參數為y軸傾斜的角度。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <style>
 .parallel {
 margin-top: 50px;
 margin-left: 50px;
 width: 200px;
 height: 100px;
 background: lightblue;
 transform: skew(-20deg, 0);
 }
 </style>
</head>
<body>
 <div class="parallel"></div>
</body>
</html>

大家可以自己動手試試。效果如下：

挑戰3: 用一個div畫五角星

對于這個五角星而言，我們可以拆分成三個部分，想一想是不是這樣？

那我們現在就來實現這三個部分。對于最上面的三角，我們在第一個部分已經實現了三角形，這個不難。但是下面的兩個如何實現呢？

其實也非常的簡單，想一想，下面這兩個是不是就是一個向上的三角形旋轉而來呢？明白了這一點，就可以動手實現啦！

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <style>
 #star {
 position: relative;
 margin: 200px auto;
 width: 0;
 height: 0;
 border-style: solid;
 border-color: transparent transparent red transparent;
 border-width: 70px 100px;
 transform: rotate(35deg);
 }
 #star::before {
 position: absolute;
 content: '';
 width: 0;
 height: 0;
 top: -128px;
 left: -95px;
 border-style: solid;
 border-color: transparent transparent red transparent;
 border-width: 80px 30px;
 transform: rotate(-35deg);
 }
 #star::after {
 position: absolute;
 content: '';
 width: 0;
 height: 0;
 top: -45px;
 left: -140px;
 border-style: solid;
 border-color: transparent transparent red transparent;
 border-width: 70px 100px;
 transform: rotate(-70deg);
 }
 </style>
</head>
<body>
 <div id="star"></div>
</body>
</html>

效果如下：

你沒看錯，這就是CSS3的威力！

挑戰4: 畫一個愛心

看起來好像不容易下手，我們先來分解一下這個心形的結構：

是兩個形狀相同的部分，對其中一種稍微旋轉一下：

現在就來構造這個部分：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <style>
 .heart {
 width: 100px;
 height: 90px;
 position: relative;
 margin: 100px auto;
 }
 .heart::before {
 content: '';
 position: absolute;
 width: 50px;
 height: 90px;
 background: red;
 border-radius: 50px 45px 0 0;
 /* 設置旋轉中心 */
 transform-origin: 0 100%;
 transform: rotate(-45deg);
 }
 .heart::after {
 content: '';
 position: absolute;
 width: 50px;
 height: 90px;
 top: -35px;
 left: -35px;
 background: red;
 border-radius: 50px 45px 0 0;
 /* 設置旋轉中心 */
 transform-origin: 0 100%;
 transform: rotate(45deg);
 }
 </style>
</head>
<body>
 <div class="heart"></div>
</body>
</html>

效果如下：

同樣一個div完成了這個效果，是不是非常酷炫呢：)

關注我的頭條號，分享更多的技術學習文章，我自己是一名從事了多年開發的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個月整理了一份最適合2019年學習的web前端學習干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關注我的頭條號并在后臺私信我：前端，即可免費獲取。

挑戰5: 畫一個八卦陣

還是來分解它的結構：

按照之前的思路，估計你也有想法了，這個時候依然可以用偽類來畫出兩個小的圓，那么問題來了，像這種顏色不同的同心圓如何用CSS表達呢？

其實很簡單，根據border-radius可以影響padding的形狀這一規則，外面的一圈用border來表達，而中間利用白色的背景顏色將padding填滿，寬度和高度都可以設為0。

另一個問題是:大圓的效果如何實現？有兩種實現思路，一種是用border-left來表示左邊的半圓，右邊的半圓利用本身的寬度。第二種方案其實是從《CSS揭秘》獲得的靈感，可以利用linear-gradient顏色漸變的屬性來調整。

接下來編碼實現：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <style>
 body{
 background-color: #ccc;
 }
 /* 大圓部分第一種思路 (注意下面的小圓定位要調整下)*/
 /* .bagua{
 position: relative;
 width: 150px;
 height: 300px;
 margin: 100px auto;
 border-radius: 50%;
 background-color: #fff;
 border-left: 150px solid #000;
 } */
 /* 大圓部分第二種思路 */
 .bagua{
 position: relative;
 width: 300px;
 height: 300px;
 margin: 100px auto;
 border-radius: 50%;
 background-color: #000;
 /*從0-50%用背景色，50%開始到100%用#fff */
 background-image: linear-gradient(to right, transparent 50%, #fff 50%);
 }
 .bagua::before{
 content: '';
 position: absolute;
 left: 75px;
 width: 0;
 height: 0;
 padding: 25px;
 border-radius: 50%;
 border: 50px solid #000;
 background: #fff;
 background-clip: padding-box;
 }
 .bagua::after{
 content: '';
 position: absolute;
 top: 150px;
 left: 75px;
 width: 0;
 height: 0;
 padding: 25px;
 border-radius: 50%;
 border: 50px solid #fff;
 background: #000;
 background-clip: padding-box;
 }
 </style>
</head>
<body>
 <div class="bagua"></div>
</body>
</html>

效果如下：

挑戰6: 超級棒棒糖

這里直接擺出效果吧：

其中利用了兩個CSS3中非常重要的屬性————線性漸變和徑向漸變。其中圓形部分利用radial-gradient屬性，也就是徑向漸變，棒子的顏色利用linear-gradient，之前已經用過，也就是線性漸變。

代碼參考如下:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <style>
 .linear{
 width: 300px;
 height: 300px;
 margin: 20px auto;
 border-radius: 50%;
 /* 重復性徑向漸變 */
 background-image: repeating-radial-gradient(red 0px, green 30px, orange 40px);
 position: relative;
 }
 .linear::after{
 content: '';
 position: absolute;
 top: 100%;
 left: 50%;
 width: 10px;
 height: 500px;
 border-radius: 0 0 10px 10px;
 /* 線性漸變 */
 background-image: linear-gradient(to top, red 20%, orange 40%, lightblue 60%, green 80%);
 }
 </style>
</head>
<body>
 <div class="linear"></div>
</body>
</html>

挑戰7：跳動的字節

相當于是一個loading的效果。其實實現起來是非常簡單的，這里直接用animation-delay即可控制五個元素的錯落感。直接貼上代碼，大家可以參考一下:

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>JS Bin</title>
 <style>
 .spinner{
 margin: 100px auto;
 width: 50px;
 height: 50px;
 text-align: center;
 font-size: 10px;
 }
 
 .spinner > div{
 display: inline-block;
 background-color: rgb(43, 128, 226);
 height: 100%;
 width: 5px;
 margin-right:1px;
 animation: bytedance 1s infinite;
 }
 
 .spinner >div:nth-child(2) {
 background-color: rgb(49, 84, 124);
 animation-delay: -0.9s;
 }
 .spinner >div:nth-child(3) {
 background-color: rgb(88, 128, 173);
 animation-delay: -0.8s;
 }
 .spinner >div:nth-child(4) {
 background-color: rgb(88, 128, 173);
 animation-delay: -0.7s;
 }
 .spinner >div:nth-child(5) {
 background-color: rgb(142, 187, 240);
 animation-delay: -0.6s;
 } 
 
 @keyframes bytedance{
 0%, 40%, 100%{
 transform: scaleY(0.4);
 }
 20%{
 transform: scaleY(1);
 }
 }
 </style>
</head>
<body>
 <div class="spinner">
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 </div>
</body>
</html>

挑戰8: 漣漪緩動效果

這里顯然可以分解成兩個圓，仍然是利用animation-delay來實現錯落感。當一個圓縮小為0的時候，另一圓剛好擴展為最大，依次規律循環。

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>Loading</title>
 <style>
 .spinner{
 width: 60px;
 height: 60px;
 position: relative;
 margin: 100px auto;
 }
 
 .spinner > div{
 width: 100%;
 height: 100%;
 opacity: 0.6;
 border-radius: 50%;
 background-color: lightblue;
 position: absolute;
 top: 0;
 left: 0;
 animation: loading 1.4s infinite ease-in;
 }
 
 .spinner > div:nth-child(2){
 animation-delay: -0.7s;
 }
 
 @keyframes loading{
 0%, 100% {
 transform: scale(0.0);
 }
 50% {
 transform: scale(1.0);
 }
 
 }
 </style>
</head>
<body>
 <div class="spinner">
 <div></div>
 <div></div>
 </div>
</body>
</html>

通過這些有趣的挑戰，相信你已經體會到CSS3世界的奇妙了，但是但是，有部分屬性并不是所有的瀏覽器都支持，保守起見，最好在CSS3新特性名之前加上瀏覽器的前綴，本文側重效果的實現，兼容這塊暫不做處理。

作為前端工程師，平時通常拿CSS做頁面布局，甚至有時候會出現很多莫名其妙的bug，于是很多人不太愿意來寫CSS，但實際上更多的時候是因為我們了解不夠，功夫不到家，才會覺得這個東西不友好，感到不喜歡，當你開始擺脫門外漢的姿態，真正踏進那個廣袤的世界，能夠對它的各種特點信手拈來，又會情不自禁地愛上這個東西。因此，有時候我們缺少的不是能力，而是一種包容的心態。

在線咨詢

上一篇：JavaScript 運行機制(Event Loop
下一篇：網絡安全干貨分享 - 2022 年最佳 SQL 注入

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

跳動的“loading”，個個都很驚艷

言

loader-1

實現邏輯

完整代碼

loader-2

實現邏輯

完整代碼

loader-3

實現邏輯

完整代碼

loader-4

實現邏輯

完整代碼

您的項目需求