【動畫消消樂｜CSS】單span標籤實現自定義簡易過渡動畫 076

阿新 • • 發佈：2021-08-05

前言

Hello！小夥伴！
非常感謝您閱讀海轟的文章，倘若文中有錯誤的地方，歡迎您指出～

自我介紹 ଘ(੭ˊᵕˋ)੭
暱稱：海轟
標籤：程式猿｜C++選手｜學生
簡介：因C語言結識程式設計，隨後轉入計算機專業，有幸拿過國獎、省獎等，已保研。目前正在學習C++/Linux（真的真的太難了～）
學習經驗：紮實基礎 + 多做筆記 + 多敲程式碼 + 多思考 + 學好英語！

【動畫消消樂】平時學習生活比較枯燥，無意之間對一些網頁、應用程式的過渡/載入動畫產生了濃厚的興趣，想知道具體是如何實現的？便在空閒的時候學習下如何使用css實現一些簡單的動畫效果，文章僅供作為自己的學習筆記，記錄學習生活，爭取理解動畫的原理，多多“消滅”動畫！

效果展示

Demo程式碼

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <section><span></span></section>
</body>
</html>

CSS

html, body {
  margin: 0;
  height: 100%;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #ed556a;
}

section {
  width: 650px;
  height: 300px;
  padding: 10px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid white;
}

span {
  width: 5px;
  height: 5px;
  display: inline-block;
  position: relative;
  border-radius: 4px;
  background: white;
  animation: loading 1s 0s linear infinite alternate;
}

span::before, span::after {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 4px;
  background: white;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 15px;
  animation: loading 1s 0.6s linear infinite alternate;
}

span::after {
  top: -15px;
  animation-delay: 0.9s;
}

@keyframes loading {
  0% {
    width: 5px;
  }
  100% {
    width: 48px;
  }
}

原理詳解

步驟1

使用span標籤設定為

相對定位
寬度、高度均為5px
背景色：白色
border-radius: 4px;

 span {
	width: 5px;
	height: 5px;
	position: relative;
	border-radius: 4px;
	background: white;
  }

效果圖如下

步驟2

使用span::before、span::after偽元素

同時設定為

絕對定位
寬度、高度均為5px
背景色：白色
border-radius: 4px;

  span::before, span::after {
	content: '';
	width: 5px;
	height: 5px;
	border-radius: 4px;
	background: white;
	position: absolute;
	
	/* 重點 */
	left: 50%;
	transform: translateX(-50%);
	top: 15px;
  }

效果圖如下

特別注意，這裡絕對位置關係為

	left: 50%;
	transform: translateX(-50%);
	top: 15px;

具體這樣設定的原因後面說明一下

步驟3

分離before和after

使after位於span之上

與after形成關於span對稱

  span::after {
	top: -15px;
  }

效果圖如下

步驟4

為span新增動畫

動畫很簡單

只是span的寬度屬性隨著時間而變化

初始狀態：寬度為5px
末尾狀態：寬度為48px

  @keyframes loading {
	0% {
	  width: 5px;
	}
	100% {
	  width: 48px;
	}
  }

  span {
	animation: loading 1s 0s linear infinite alternate;
  }

效果圖如下

步驟5

對span::after、span::before使用同樣的動畫

為了實現不同步的效果

分別設定不同的動畫開始延時時間即可

 span::before, span::after {
	animation: loading 1s 0.6s linear infinite alternate;
  }
    
  span::after {
	animation-delay: 0.9s;
  }

效果圖如下

疑難解釋

關鍵程式碼為

	left: 50%;
	transform: translateX(-50%);
	top: 15px;

這三句程式碼的意思是：

after、before位於span下方15px
再向左移動相當於span自身50%寬度的距離
再向右移動相當於span::after/before自身50%寬度的距離

如果只是

	left: 50%;
	top: 15px;

效果圖如下

為什麼會出現這種效果呢？

首先span是海轟事先設定一直位於整個容器正中的，如果只有left: 50%;，說明before、after在橫軸方向一直是相對於span最左端移動了相對於span自身50%的距離，無論span寬度怎麼變化，它的50%一直都是在中間，所以before、after最左端相當於固定了

而使用就可以實現span和span::after/before的中心處於同一直線上

	left: 50%;
	transform: translateX(-50%);
	top: 15px;

只需要記住：

left: 50%;是向左移動相當於span50%寬度的距離
transform: translateX(-50%);是指向右移動相當於自身50%寬度的距離

可以發現

通過使用

	left: 50%;
	transform: translateX(-50%);

可以使得span和span::after/before中心處於同一條直線上（始終處於動畫執行時也始終保持因為設定的是百分比）

結語

文章僅作為學習筆記，記錄從0到1的一個過程

希望對您有所幫助，如有錯誤歡迎小夥伴指正～

我是 海轟ଘ(੭ˊᵕˋ)੭

如果您覺得寫得可以的話，請點個贊吧

謝謝支援❤️