前言
Hello！小伙伴瘦真！
非常感謝您閱讀海轟的文章属铁，倘若文中有錯誤的地方憎夷，歡迎您指出～
?
自我介紹 ?(?ˊ?ˋ)?
昵稱：海轟
標簽：程序猿｜C++選手｜學生
簡介：因C語言結(jié)識編程，隨后轉(zhuǎn)入計算機專業(yè)躬柬，有幸拿過國獎耐床、省獎等，已保研楔脯。目前正在學習C++/Linux（真的真的太難了～）
學習經(jīng)驗：扎實基礎(chǔ) + 多做筆記 + 多敲代碼 + 多思考 + 學好英語撩轰！
?
<font color="red" font-wight="800">【動畫消消樂】</font> 平時學習生活比較枯燥，無意之間對一些網(wǎng)頁、應(yīng)用程序的過渡/加載動畫產(chǎn)生了濃厚的興趣堪嫂，想知道具體是如何實現(xiàn)的偎箫？ 便在空閑的時候?qū)W習下如何使用css實現(xiàn)一些簡單的動畫效果，文章僅供作為自己的學習筆記皆串，記錄學習生活淹办，爭取理解動畫的原理，多多“消滅”動畫恶复！
效果展示
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標簽 設(shè)置為
- 相對定位
- 寬度怜森、高度均為5px
- 背景色：白色
- border-radius: 4px;
span {
width: 5px;
height: 5px;
position: relative;
border-radius: 4px;
background: white;
}
效果圖如下
步驟2
使用span::before、span::after偽元素
同時設(shè)置為
- 絕對定位
- 寬度谤牡、高度均為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;
}
效果圖如下
特別注意副硅，這里絕對位置關(guān)系為
left: 50%;
transform: translateX(-50%);
top: 15px;
具體這樣設(shè)置的原因后面說明一下
步驟3
分離before和after
使after位于span之上
與after形成關(guān)于span對稱
span::after {
top: -15px;
}
效果圖如下
步驟4
為span添加動畫
動畫很簡單
只是span的寬度屬性隨著時間而變化
- 初始狀態(tài)：寬度為5px
- 末尾狀態(tài)：寬度為48px
@keyframes loading {
0% {
width: 5px;
}
100% {
width: 48px;
}
}
span {
animation: loading 1s 0s linear infinite alternate;
}
效果圖如下
步驟5
對span::after、span::before使用同樣的動畫
為了實現(xiàn)不同步的效果
分別設(shè)置不同的動畫開始延時時間即可
span::before, span::after {
animation: loading 1s 0.6s linear infinite alternate;
}
span::after {
animation-delay: 0.9s;
}
效果圖如下
疑難解釋
關(guān)鍵代碼為
left: 50%;
transform: translateX(-50%);
top: 15px;
這三句代碼的意思是：
- after翅萤、before位于span下方15px
- 再向左移動 相當于span自身50%寬度的距離
- 再向右移動 相當于span::after/before自身50%寬度的距離
如果只是
left: 50%;
top: 15px;
效果圖如下
為什么會出現(xiàn)這種效果呢恐疲？
首先span是海轟事先設(shè)置一直位于整個容器正中的，如果只有left: 50%;套么，說明before培己、after在橫軸方向一直是相對于span最左端移動了相對于span自身50%的距離，無論span寬度怎么變化胚泌，它的50%一直都是在中間省咨，所以before、after最左端相當于固定了
而使用 就可以實現(xiàn)span和span::after/before的中心處于同一直線上
left: 50%;
transform: translateX(-50%);
top: 15px;
只需要記诅枋摇：
- left: 50%;是向左移動相當于span50%寬度的距離
-
transform: translateX(-50%);是指向右移動相當于自身50%寬度的距離
在這里插入圖片描述
可以發(fā)現(xiàn)
通過使用
left: 50%;
transform: translateX(-50%);
可以使得span和span::after/before中心處于同一條直線上（始終處于 動畫運行時也始終保持 因為設(shè)置的是百分比）
結(jié)語
文章僅作為學習筆記零蓉，記錄從0到1的一個過程
希望對您有所幫助，如有錯誤歡迎小伙伴指正～
我是 <font color="#0984e3">海轟?(?ˊ?ˋ)?</font>
如果您覺得寫得可以的話阵苇，請點個贊吧
謝謝支持??
