前言
Hello央渣！小伙伴！
非常感謝您閱讀海轟的文章渴频，倘若文中有錯(cuò)誤的地方芽丹，歡迎您指出～
?
自我介紹 ?(?ˊ?ˋ)?
昵稱：海轟
標(biāo)簽：程序猿｜C++選手｜學(xué)生
簡(jiǎn)介：因C語(yǔ)言結(jié)識(shí)編程，隨后轉(zhuǎn)入計(jì)算機(jī)專業(yè)卜朗，有幸拿過(guò)國(guó)獎(jiǎng)拔第、省獎(jiǎng)等咕村，已保研。目前正在學(xué)習(xí)C++/Linux（真的真的太難了～）
學(xué)習(xí)經(jīng)驗(yàn)：扎實(shí)基礎(chǔ) + 多做筆記 + 多敲代碼 + 多思考 + 學(xué)好英語(yǔ)蚊俺！
?
<font color="red" font-wight="800">【動(dòng)畫(huà)消消樂(lè)】</font> 平時(shí)學(xué)習(xí)生活比較枯燥懈涛，無(wú)意之間對(duì)一些網(wǎng)頁(yè)、應(yīng)用程序的過(guò)渡/加載動(dòng)畫(huà)產(chǎn)生了濃厚的興趣泳猬，想知道具體是如何實(shí)現(xiàn)的批钠？ 便在空閑的時(shí)候?qū)W習(xí)下如何使用css實(shí)現(xiàn)一些簡(jiǎn)單的動(dòng)畫(huà)效果，文章僅供作為自己的學(xué)習(xí)筆記暂殖，記錄學(xué)習(xí)生活价匠，爭(zhēng)取理解動(dòng)畫(huà)的原理当纱，多多“消滅”動(dòng)畫(huà)呛每！
效果展示
難度 ??
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: #222f3e;
}
section {
width: 650px;
height: 300px;
padding: 10px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid white;
}
span {
width: 100%;
height: 5px;
display: inline-block;
position: relative;
background: rgba(255, 255, 255, 0.15);
overflow: hidden;
}
span::after {
content: '';
width: 96px;
height: 5px;
background: white;
position: absolute;
top: 0;
left: 0;
animation: loading 2s linear infinite alternate;
}
@keyframes loading {
0% {
left: 0;
transform: translateX(0%)
}
100% {
left: 100%;
transform: translateX(-100%)
}
}
原理詳解
步驟1
使用一個(gè)span標(biāo)簽
<span></span>
設(shè)置為
- 相對(duì)定位
- 寬度為100% 高度為5px
- 背景顏色為 白色，透明級(jí)別為0.15
span {
width: 100%;
height: 5px;
position: relative;
background: rgba(255, 255, 255, 0.15);
}
效果圖如下：
步驟2
利用span::after作為白色條紋部分
設(shè)置為
- 絕對(duì)定位（top:0 left:0）
- 寬度為96px 高度為5px（與span高度保持一致）
- 背景顏色為白色
span::after {
content: '';
width: 96px;
height: 5px;
background: white;
position: absolute;
top: 0;
left: 0;
/* animation: loading 2s linear infinite alternate; */
}
效果圖如下：
步驟3
為span::after添加動(dòng)畫(huà)
使得白色條狀部分從左到右運(yùn)動(dòng)坡氯、再?gòu)挠业阶筮\(yùn)動(dòng)
設(shè)置兩個(gè)關(guān)鍵幀：
- 初始位置：最左端
- 末尾位置：最右端
在最左端時(shí)left: 0;
在最右端時(shí)
left: 100%; transform: translateX(-100%)
css代碼
span::after {
animation: loading 2s linear infinite alternate;
}
@keyframes loading {
0% {
left: 0;
transform: translateX(0%)
}
100% {
left: 100%;
transform: translateX(-100%)
}
}
最后效果圖如下：
疑點(diǎn)難點(diǎn)
在最右端時(shí)為什么這樣設(shè)置晨横？ left: 100%; transform: translateX(-100%) 只寫 left: 100%;不行嗎？
如果只寫 left: 100%; 效果為：
注：白色邊框可以忽略不看 這里只是用來(lái)模擬頁(yè)面邊界的
而我們需要的效果是在最右端的時(shí)候箫柳，是白色條紋的最右端與span的最右端重疊手形，而不是最左端與span的最右端重疊
所以我們還需要使用transform: translateX(-100%)
再將span::after向左移動(dòng) 相對(duì)于自身（span::after）100%寬度 的距離
一定要注意，是相對(duì)于span::after自身的寬度Ｃ趸小（與left不同 left是相對(duì)于span寬度的）
結(jié)語(yǔ)
文章僅作為學(xué)習(xí)筆記库糠，記錄從0到1的一個(gè)過(guò)程
希望對(duì)您有所幫助，如有錯(cuò)誤歡迎小伙伴指正～
我是 <font color="#0984e3">海轟?(?ˊ?ˋ)?</font>
如果您覺(jué)得寫得可以的話涮毫，請(qǐng)點(diǎn)個(gè)贊吧
謝謝支持??
