很酷的CSS Loading動畫，讓網頁加載更有趣

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

HTML 結構

首先是HTML代碼，定義了一個類名container的<div>容器：

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

<!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 樣式

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

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

* {
  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;
  }  
}

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

最后

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

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

言

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

1. CSS3動畫基礎知識

1.1 過渡（Transition）

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

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

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

在這個例子中，當.button的background-color屬性發(fā)生變化時，將會在0.5秒內平滑過渡。

1.2 關鍵幀動畫（Keyframes）

關鍵幀動畫允許我們自定義更復雜的動畫序列，包括多個中間狀態(tài)。

/* 定義關鍵幀動畫 */
@keyframes fadeInOut {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

/* 應用動畫 */
.element {
  animation: fadeInOut 2s infinite;
}

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

2. 動畫屬性與值

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

3. 高級應用及技巧

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

4. 實戰(zhàn)案例

示例1 - 圖片淡入淡出滾動效果

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

示例2 - 旋轉動畫

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

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

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

SS簡介

1.什么是CSS？

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

2.為什么使用CSS？

實現內容與樣式的分離，方便團隊開發(fā)
樣式復用，便于網站后期維護
頁面的精確控制，讓頁面更精美

3.CSS作用

頁面外觀美化
布局和定位

CSS動畫

動畫的原理

人腦的bug

定義

由許多靜止的畫面（幀）組成
以一定的速度（如每秒30張）連續(xù)播放時
肉眼因視覺殘象產生錯覺
而誤以為是活動的畫面

概念

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

瀏覽器渲染原理

瀏覽器渲染過程步驟

根據HTML構建HTML樹（DOM）
根據CSS構建CSS樹（CSSOM）
將兩棵樹合并成一棵渲染樹（render tree）
Layout布局（文檔流、盒模型、計算大小和位置）
Paint繪制（把邊框顏色、文字顏色、陰影等畫出來）
Comepose合成（根據層疊關系展示畫面）

三棵樹

如何更新樣式

一般JS來更新樣式

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

三種更新方式

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

全走

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

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

跳過Layout

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

3.JS/CSS》樣式》合成

跳過Layout和Paint

比如：改變transform，直接composite。

CSS動畫優(yōu)化

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

CSS 動畫的兩種做法（transition 和 animation）

一. transform

四個常用功能

位移 translate
縮放 scale
旋轉 rotate
傾斜 skew

經驗：

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

transform: translate

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

經驗：

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

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

transform: scale

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

經驗：

用得較少，容易出現模糊

transform: rotate

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

經驗：

一般用于360°旋轉制作loading。

transform: skew

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

經驗：

用得較少

transform 可以組合使用

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

transition 過渡

作用

補充中間幀

語法

transition: 屬性名時長過渡方式延遲
transition: left 200ms linear
可以用逗號分隔開兩個不同的屬性
transition: left200ms，top400ms
可以用all代表所有屬性
transition: 200ms
過渡方式有： linear|ease|ease-in|ease-out|ease-in-out|**cubic-bezier|step-start|step-end|steps,具體含義要靠數學知識

并不是所有的屬性都能過度

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

二. animation

縮寫語法

animation: 時長 | 過渡方式 | 延遲 | 次數 | 方向 | 填充模式 | 是否暫停 | 動畫名
時長: 1s 或者 1000ms
過渡方式: 跟transition的取值一樣，如linear
次數: 3 或 n 或者 infinite
方向: reverse | alternate | alternate-reverse
填充模式: none | forwards | backwards | both
是否暫停: paused | running
這些屬性都有對應的單獨屬性

使用animation

聲明關鍵幀 @keyframes xxx
添加動畫 animation:xxx

如何讓動畫停在最后一幀

給animation加個forwards

@keyframes 完整語法

一種寫法是from…to
另一種寫法是百分數

本文為作者本人的原創(chuàng)文章，著作權歸作者本人和饑人谷所有，轉載務必注明來源。

在線咨詢

上一篇：CSS美化網頁
下一篇：這款免費的網紅下載神器，時至今日居然還有人不會用？

您的項目需求

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

整合營銷服務商