很酷的CSS Loading動(dòng)畫(huà)，讓網(wǎng)頁(yè)加載更有趣

用戶正在瀏覽網(wǎng)站網(wǎng)頁(yè)時(shí)，為了更好的用戶體驗(yàn)，經(jīng)常會(huì)使用 加載中 文字或者動(dòng)畫(huà)來(lái)表示正在 加載數(shù)據(jù) 或 執(zhí)行某項(xiàng)操作。而使用動(dòng)畫(huà)不僅能夠吸引用戶的注意力，同時(shí)也能夠傳達(dá)信息"系統(tǒng)正在工作中"，需要一些時(shí)間來(lái)完成任務(wù)。本文將詳細(xì)介紹如何通過(guò) CSS 創(chuàng)建一個(gè) 加載中 動(dòng)畫(huà)效果。

HTML 結(jié)構(gòu)

首先是HTML代碼，定義了一個(gè)類(lèi)名container的<div>容器：

在這個(gè)容器里面包含了一些加載器.loader，每個(gè)加載器都具有不同的旋轉(zhuǎn)角度自定義屬性--r(1~4)，而每個(gè)加載器里面有20個(gè)<span>元素，并且也都具有不同的旋轉(zhuǎn)角度自定義屬性--r(1~20)。
后面會(huì)通過(guò)CSS設(shè)置不同的旋轉(zhuǎn)角度屬性--r和旋轉(zhuǎn)角度子屬性--i，創(chuàng)建多個(gè)加載器，并且每個(gè)加載器都具有不同的動(dòng)畫(huà)表現(xiàn)。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Animation</title>

  <link rel="stylesheet" href="./index.css">
</head>

<body>
  <div class="container">
    <div class="loader" style="--r: 1">
      <span style="--i: 1"></span>
      <span style="--i: 2"></span>
      <span style="--i: 3"></span>
      <span style="--i: 4"></span>
      <span style="--i: 5"></span>
      <span style="--i: 6"></span>
      <span style="--i: 7"></span>
      <span style="--i: 8"></span>
      <span style="--i: 9"></span>
      <span style="--i: 10"></span>
      <span style="--i: 11"></span>
      <span style="--i: 12"></span>
      <span style="--i: 13"></span>
      <span style="--i: 14"></span>
      <span style="--i: 15"></span>
      <span style="--i: 16"></span>
      <span style="--i: 17"></span>
      <span style="--i: 18"></span>
      <span style="--i: 19"></span>
      <span style="--i: 20"></span>
    </div>

    <div class="loader" style="--r: 2">
      <span style="--i: 1"></span>
      <span style="--i: 2"></span>
      <span style="--i: 3"></span>
      <span style="--i: 4"></span>
      <span style="--i: 5"></span>
      <span style="--i: 6"></span>
      <span style="--i: 7"></span>
      <span style="--i: 8"></span>
      <span style="--i: 9"></span>
      <span style="--i: 10"></span>
      <span style="--i: 11"></span>
      <span style="--i: 12"></span>
      <span style="--i: 13"></span>
      <span style="--i: 14"></span>
      <span style="--i: 15"></span>
      <span style="--i: 16"></span>
      <span style="--i: 17"></span>
      <span style="--i: 18"></span>
      <span style="--i: 19"></span>
      <span style="--i: 20"></span>
    </div>

    <div class="loader" style="--r: 3">
      <span style="--i: 1"></span>
      <span style="--i: 2"></span>
      <span style="--i: 3"></span>
      <span style="--i: 4"></span>
      <span style="--i: 5"></span>
      <span style="--i: 6"></span>
      <span style="--i: 7"></span>
      <span style="--i: 8"></span>
      <span style="--i: 9"></span>
      <span style="--i: 10"></span>
      <span style="--i: 11"></span>
      <span style="--i: 12"></span>
      <span style="--i: 13"></span>
      <span style="--i: 14"></span>
      <span style="--i: 15"></span>
      <span style="--i: 16"></span>
      <span style="--i: 17"></span>
      <span style="--i: 18"></span>
      <span style="--i: 19"></span>
      <span style="--i: 20"></span>
    </div>

    <div class="loader" style="--r: 4">
      <span style="--i: 1"></span>
      <span style="--i: 2"></span>
      <span style="--i: 3"></span>
      <span style="--i: 4"></span>
      <span style="--i: 5"></span>
      <span style="--i: 6"></span>
      <span style="--i: 7"></span>
      <span style="--i: 8"></span>
      <span style="--i: 9"></span>
      <span style="--i: 10"></span>
      <span style="--i: 11"></span>
      <span style="--i: 12"></span>
      <span style="--i: 13"></span>
      <span style="--i: 14"></span>
      <span style="--i: 15"></span>
      <span style="--i: 16"></span>
      <span style="--i: 17"></span>
      <span style="--i: 18"></span>
      <span style="--i: 19"></span>
      <span style="--i: 20"></span>
    </div>
  </div>
</body>

</html>

CSS 樣式

接下來(lái)看CSS代碼，重置全局樣式后，給.container元素定義了水平垂直居中布局，然后使用filter樣式屬性來(lái)應(yīng)用色相旋轉(zhuǎn)(hue-rotate)濾鏡，將背景色調(diào)整為90度的色相。因此，子元素的任何顏色同樣會(huì)添加濾鏡。

首先，每個(gè).loader元素通過(guò)transform: rotate()屬性根據(jù)--r值設(shè)置旋轉(zhuǎn)角度 (45deg * 1/2/3/4 = 45/90/135/180deg)。
其次，每個(gè)span元素使用定位設(shè)置初始位置在左側(cè)，以及通過(guò)transform: rotate()屬性根據(jù)--i值設(shè)置旋轉(zhuǎn)角度 (18deg * 1~20 = 18 ~ 360deg)。
然后，每個(gè)span::before定義固定的寬度和高度及背景顏色。使用box-shadow屬性定義了一個(gè)由多個(gè)投影組成的陰影效果，產(chǎn)生一種立體感。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  min-height: 100vh;
  background-color: #042104;
  filter: hue-rotate(90deg);

  display: flex;
  justify-content: center;
  align-items: center;
}

.loader {
  position: relative;
  transform: rotate(calc(var(--r) * 45deg));
}

.loader span {
  position: absolute;
  top: 0;
  left: -200px;

  width: 200px;
  height: 2px;
  transform-origin: right;
  transform: rotate(calc(var(--i) * 18deg));
}

.loader span::before {
  content: "";
  display: block;

  width: 15px;
  height: 15px;
  background-color: #00ff0a;
  border-radius: 15px;
  box-shadow: 0 0 10px #00ff0a, 
              0 0 20px #00ff0a, 
              0 0 40px #00ff0a, 
              0 0 60px #00ff0a, 
              0 0 80px #00ff0a, 0 0 100px #00ff0a;
  animation: animate 5s linear infinite;
  animation-delay: calc(-0.5s * var(--i));
}
@keyframes animate {
  0% {
    transform: translateX(200px) scale(1);
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  80% {
    opacity: 1;
  }

  100% {
    transform: translateX(0) scale(0);
    opacity: 1;
  }
}



@media screen and (max-width: 576px) {
  .container .loader {
    scale: .6;
  }  
}

此外，通過(guò)animation屬性和@keyframes規(guī)則，定義了名為animate的關(guān)鍵幀動(dòng)畫(huà)。該動(dòng)畫(huà)在5秒內(nèi)線性地進(jìn)行，無(wú)限循環(huán)播放。動(dòng)畫(huà)的每個(gè)關(guān)鍵幀設(shè)置了不同的變換效果，包括 平移、縮放和透明度 變化。根據(jù)時(shí)間的進(jìn)展，加載器的形狀和位置會(huì)發(fā)生變化，從而創(chuàng)造出動(dòng)態(tài)的效果。

最后

通過(guò)本篇文章的詳細(xì)介紹，相信能夠幫助你更好地使用CSS來(lái)創(chuàng)建一個(gè)loading加載中動(dòng)畫(huà)，從而理解掌握和應(yīng)用這個(gè)效果。你可以根據(jù)自己的需求調(diào)整大小、顏色和持續(xù)時(shí)間等參數(shù)，創(chuàng)建符合你網(wǎng)頁(yè)風(fēng)格的加載中動(dòng)畫(huà)。加載中動(dòng)畫(huà)不僅能夠提供視覺(jué)上的反饋，告訴用戶系統(tǒng)正在工作中，還能夠改善用戶體驗(yàn)，減少長(zhǎng)時(shí)間等待的焦慮感。

作者：掘一
鏈接：https://juejin.cn/post/7296404570949173298

言

CSS3引入了強(qiáng)大的動(dòng)畫(huà)功能，使得開(kāi)發(fā)者能夠在不依賴(lài)JavaScript的情況下創(chuàng)建豐富的視覺(jué)動(dòng)效。本文將深入探討CSS3動(dòng)畫(huà)的核心概念、主要特性以及如何通過(guò)關(guān)鍵幀動(dòng)畫(huà)和過(guò)渡效果實(shí)現(xiàn)各類(lèi)動(dòng)畫(huà)效果。

1. CSS3動(dòng)畫(huà)基礎(chǔ)知識(shí)

1.1 過(guò)渡（Transition）

過(guò)渡是CSS3中最為基礎(chǔ)的動(dòng)畫(huà)形式之一，它定義了一個(gè)元素在兩種狀態(tài)之間變化時(shí)的速度曲線和時(shí)間間隔。

/* 基本語(yǔ)法 */
.element {
  transition: property duration timing-function delay;
}

/* 示例 */
.button {
  background-color: red;
  transition: background-color 0.5s ease-in-out;
}

在這個(gè)例子中，當(dāng).button的background-color屬性發(fā)生變化時(shí)，將會(huì)在0.5秒內(nèi)平滑過(guò)渡。

1.2 關(guān)鍵幀動(dòng)畫(huà)（Keyframes）

關(guān)鍵幀動(dòng)畫(huà)允許我們自定義更復(fù)雜的動(dòng)畫(huà)序列，包括多個(gè)中間狀態(tài)。

/* 定義關(guān)鍵幀動(dòng)畫(huà) */
@keyframes fadeInOut {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

/* 應(yīng)用動(dòng)畫(huà) */
.element {
  animation: fadeInOut 2s infinite;
}

上述代碼定義了一個(gè)名為fadeInOut的關(guān)鍵幀動(dòng)畫(huà)，該動(dòng)畫(huà)讓元素從透明度0漸變至1再回到0，整個(gè)動(dòng)畫(huà)循環(huán)持續(xù)2秒，并且無(wú)限重復(fù)。

2. 動(dòng)畫(huà)屬性與值

animation-name: 指定要使用的@keyframes規(guī)則名稱(chēng)。
animation-duration: 設(shè)置動(dòng)畫(huà)完成一個(gè)周期所花費(fèi)的時(shí)間。
animation-timing-function: 控制動(dòng)畫(huà)速度曲線，如ease, linear, ease-in, ease-out等。
animation-delay: 動(dòng)畫(huà)開(kāi)始前等待的時(shí)間。
animation-iteration-count: 動(dòng)畫(huà)播放次數(shù)，可以設(shè)置為具體數(shù)字或infinite表示無(wú)限循環(huán)。
animation-direction: 控制定向性動(dòng)畫(huà)是否應(yīng)該在每次迭代中反向播放，默認(rèn)為normal，即每次迭代按相同的順序播放。
animation-fill-mode: 規(guī)定在動(dòng)畫(huà)執(zhí)行之前和之后的狀態(tài)，例如forwards可以讓動(dòng)畫(huà)在結(jié)束后保持最后一個(gè)關(guān)鍵幀的樣式。

3. 高級(jí)應(yīng)用及技巧

動(dòng)畫(huà)同步與堆疊: 可以通過(guò)給不同的動(dòng)畫(huà)屬性設(shè)置不同值來(lái)控制多個(gè)動(dòng)畫(huà)的同時(shí)運(yùn)行或堆疊。
CSS動(dòng)畫(huà)事件監(jiān)聽(tīng): 利用JavaScript的transitionend和animationend事件可以捕獲動(dòng)畫(huà)結(jié)束時(shí)觸發(fā)的動(dòng)作。
使用will-change屬性: 提升動(dòng)畫(huà)性能，提前告知瀏覽器哪些屬性即將改變并可能需要?jiǎng)?chuàng)建層以便優(yōu)化渲染。

4. 實(shí)戰(zhàn)案例

示例1 - 圖片淡入淡出滾動(dòng)效果

.image-slide {
  opacity: 0;
  transition: opacity 0.5s;
  will-change: opacity;
  
  /* 當(dāng)圖片進(jìn)入可視區(qū)域時(shí)觸發(fā)動(dòng)畫(huà) */
  &.is-visible {
    opacity: 1;
  }
}

示例2 - 旋轉(zhuǎn)動(dòng)畫(huà)

.rotate {
  animation: rotate 2s linear infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

總結(jié)起來(lái)，CSS3動(dòng)畫(huà)功能強(qiáng)大且靈活，通過(guò)過(guò)渡和關(guān)鍵幀動(dòng)畫(huà)，我們可以輕松構(gòu)建豐富多樣的網(wǎng)頁(yè)動(dòng)態(tài)效果，提升用戶體驗(yàn)并增強(qiáng)交互性。隨著對(duì)CSS3動(dòng)畫(huà)特性的深入理解和掌握，開(kāi)發(fā)者能夠更加自如地運(yùn)用這些技術(shù)來(lái)創(chuàng)作富有創(chuàng)意和吸引力的Web界面。

SS簡(jiǎn)介

1.什么是CSS？

CSS：Cascading Style sheet層疊樣式表或級(jí)聯(lián)樣式表
? 是一種樣式設(shè)置規(guī)則，用于控制頁(yè)面的外觀的樣式

2.為什么使用CSS？

實(shí)現(xiàn)內(nèi)容與樣式的分離，方便團(tuán)隊(duì)開(kāi)發(fā)
樣式復(fù)用，便于網(wǎng)站后期維護(hù)
頁(yè)面的精確控制，讓頁(yè)面更精美

3.CSS作用

頁(yè)面外觀美化
布局和定位

CSS動(dòng)畫(huà)

動(dòng)畫(huà)的原理

人腦的bug

定義

由許多靜止的畫(huà)面（幀）組成
以一定的速度（如每秒30張）連續(xù)播放時(shí)
肉眼因視覺(jué)殘象產(chǎn)生錯(cuò)覺(jué)
而誤以為是活動(dòng)的畫(huà)面

概念

幀：每個(gè)靜止的畫(huà)面都叫做幀
播放速度：每秒24幀（影視）或者每秒30幀（游戲）

瀏覽器渲染原理

瀏覽器渲染過(guò)程步驟

根據(jù)HTML構(gòu)建HTML樹(shù)（DOM）
根據(jù)CSS構(gòu)建CSS樹(shù)（CSSOM）
將兩棵樹(shù)合并成一棵渲染樹(shù)（render tree）
Layout布局（文檔流、盒模型、計(jì)算大小和位置）
Paint繪制（把邊框顏色、文字顏色、陰影等畫(huà)出來(lái)）
Comepose合成（根據(jù)層疊關(guān)系展示畫(huà)面）

三棵樹(shù)

如何更新樣式

一般JS來(lái)更新樣式

比如div.remove()刪除節(jié)點(diǎn)
比如div.style.background = 'red'
比如div.style.display = 'none'
比如div.classList.add('red')

三種更新方式

1.JS/CSS》樣式》布局》繪制》合成

全走

比如：div.remove()會(huì)觸發(fā)當(dāng)前消失，其它元素relayout。

2.JS/CSS》樣式》繪制》合成

跳過(guò)Layout

比如：改變背景色，直接repaint+composite。

3.JS/CSS》樣式》合成

跳過(guò)Layout和Paint

比如：改變transform，直接composite。

CSS動(dòng)畫(huà)優(yōu)化

JS優(yōu)化：使用requestAnimationFrame代替setTimeout或setlntervl
CSS優(yōu)化：使用will-change或translate

CSS 動(dòng)畫(huà)的兩種做法（transition 和 animation）

一. transform

四個(gè)常用功能

位移 translate
縮放 scale
旋轉(zhuǎn) rotate
傾斜 skew

經(jīng)驗(yàn)：

一般都需要配合transition過(guò)度
inline元素不支持transform，需要先改變成block

transform: translate

translateX(像素(px) / 百分比(%))
translateY(像素(px) / 百分比(%))
translate(<像素 / 百分比>,<像素 / 百分比>？)
translateZ(像素) 且父容器加perspective
translate3d(x,y,z)

經(jīng)驗(yàn)：

多看MDN語(yǔ)法
translate(-50%,-50%)可做絕對(duì)定位元素居中

#demo{
left:50%;
top:50%;
transform:translate(-50%,-50%);
}

transform: scale

scaleX(倍數(shù))
scaleY(倍數(shù))
scale(倍數(shù)，倍數(shù))

經(jīng)驗(yàn)：

用得較少，容易出現(xiàn)模糊

transform: rotate

rotate([<angle> | <zero> ])
rotateZ([<angle> | <zero> ])
rotateX([<angle> | <zero> ])
rotateY([<angle> | <zero> ])
rotate3d

經(jīng)驗(yàn)：

一般用于360°旋轉(zhuǎn)制作loading。

transform: skew

skewX([<angle> | <zero> ])
skewY([<angle> | <zero> ])
skew([<angle> | <zero> ]，[<angle> | <zero> ]？)

經(jīng)驗(yàn)：

用得較少

transform 可以組合使用

transform：scale（0.5）translate（-100%，-100%）；
transform：none；取消所有

transition 過(guò)渡

作用

補(bǔ)充中間幀

語(yǔ)法

transition: 屬性名時(shí)長(zhǎng) 過(guò)渡方式延遲
transition: left 200ms linear
可以用逗號(hào)分隔開(kāi)兩個(gè)不同的屬性
transition: left200ms，top400ms
可以用all代表所有屬性
transition: 200ms
過(guò)渡方式有： linear|ease|ease-in|ease-out|ease-in-out|**cubic-bezier|step-start|step-end|steps,具體含義要靠數(shù)學(xué)知識(shí)

并不是所有的屬性都能過(guò)度

display: none => block 不能過(guò)渡
要改成visibility: hidden => visible
background 顏色可以過(guò)渡
opacity 透明度可以過(guò)渡

二. animation

縮寫(xiě)語(yǔ)法

animation: 時(shí)長(zhǎng) | 過(guò)渡方式 | 延遲 | 次數(shù) | 方向 | 填充模式 | 是否暫停 | 動(dòng)畫(huà)名
時(shí)長(zhǎng): 1s 或者 1000ms
過(guò)渡方式: 跟transition的取值一樣，如linear
次數(shù): 3 或 n 或者 infinite
方向: reverse | alternate | alternate-reverse
填充模式: none | forwards | backwards | both
是否暫停: paused | running
這些屬性都有對(duì)應(yīng)的單獨(dú)屬性

使用animation

聲明關(guān)鍵幀 @keyframes xxx
添加動(dòng)畫(huà) animation:xxx

如何讓動(dòng)畫(huà)停在最后一幀

給animation加個(gè)forwards

@keyframes 完整語(yǔ)法

一種寫(xiě)法是from…to
另一種寫(xiě)法是百分?jǐn)?shù)

本文為作者本人的原創(chuàng)文章，著作權(quán)歸作者本人和饑人谷所有，轉(zhuǎn)載務(wù)必注明來(lái)源。

在線咨詢

上一篇：CSS美化網(wǎng)頁(yè)
下一篇：這款免費(fèi)的網(wǎng)紅下載神器，時(shí)至今日居然還有人不會(huì)用？

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商

很酷的CSS Loading動(dòng)畫(huà)，讓網(wǎng)頁(yè)加載更有趣

HTML 結(jié)構(gòu)

CSS 樣式

相關(guān)

最后

言

1. CSS3動(dòng)畫(huà)基礎(chǔ)知識(shí)

1.2 關(guān)鍵幀動(dòng)畫(huà)（Keyframes）

2. 動(dòng)畫(huà)屬性與值

3. 高級(jí)應(yīng)用及技巧

4. 實(shí)戰(zhàn)案例

SS簡(jiǎn)介

CSS動(dòng)畫(huà)

瀏覽器渲染原理

CSS 動(dòng)畫(huà)的兩種做法（transition 和 animation）

您的項(xiàng)目需求