前言
Hello！小夥伴！
非常感謝您閱讀海轟的文章，倘若文中有錯誤的地方，歡迎您指出～
自我介紹 ଘ(੭ˊᵕˋ)੭
暱稱：海轟
標籤：程式猿｜C++選手｜學生
簡介：因C語言結識程式設計，隨後轉入計算機專業，有幸拿過國獎、省獎等，已保研。目前正在學習C++/Linux（真的真的太難了～）
學習經驗：紮實基礎 + 多做筆記 + 多敲程式碼 + 多思考 + 學好英語！
【動畫消消樂】 平時學習生活比較枯燥，無意之間對一些網頁、應用程式的過渡/載入動畫產生了濃厚的興趣，想知道具體是如何實現的？ 便在空閒的時候學習下如何使用css實現一些簡單的動畫效果，文章僅供作為自己的學習筆記，記錄學習生活，爭取理解動畫的原理，多多“消滅”動畫！
Demo
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;
/* background-color: #82466e; */
animation: backColor 4s infinite;
}
section {
width: 650px;
height: 300px;
padding: 10px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid white;
}
span {
width: 8px;
height: 40px;
border-radius: 4px;
display: inline-block;
position: relative;
background: white;
color: white;
animation: loading 0.6s 0s linear infinite alternate;
}
span::before, span::after {
content: '';
width: 8px;
height: 40px;
border-radius: 4px;
background: white;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 20px;
animation: loading 0.6s 0.3s linear infinite alternate;
}
span::after {
left: -20px;
animation-delay: 0.6s;
}
@keyframes loading {
0% {
height: 64px;
}
100% {
height: 5px;
}
}
原理詳解
步驟1
使用span標籤，設定為
- 寬度：8px
- 高度：40px
- 背景色：白色
- color：白色
- 相對定位
- border-radius: 4px
span {
width: 8px;
height: 40px;
border-radius: 4px;
position: relative;
background: white;
color: white;
}
效果圖如下
步驟2
為span新增動畫
動畫效果描述為：span的長度從短變長再變短
具體設定：
- 初始狀態：高度64px
- 末尾狀態：高度5px
動畫設定為
- 持續時間0.6s
- 開始延遲0s
- 速度曲線：linear，均勻變化
- 無限迴圈
- 動畫交替進行
animation: loading 0.6s 0s linear infinite alternate;
@keyframes loading {
0% {
height: 64px;
}
100% {
height: 5px;
}
}
效果圖如下
注：產生上述條件的前提是海轟事先將span設定為頁面居中（上下左右都居中）
步驟3
使用span::before和span::after偽元素
先同時設定
其屬性設定為
- 絕對定位（left：20px）
- 寬度：8px
- 高度：40px
- border-radius: 4px
- 背景色：白色
span::before, span::after {
content: '';
width: 8px;
height: 40px;
border-radius: 4px;
background: white;
position: absolute;
left: 20px;
}
效果圖如下
注：上述效果圖span動畫暫時不生效
當span動畫生效時，效果如下
可以發現：右邊的白色部分最上部分一直與左邊最上部分處於同一水平線
步驟4
為了將span::before、span::after固定，不隨span上下移動
設定
span::before, span::after {
top: 50%;
transform: translateY(-50%);
}
效果圖為
步驟5
為span::before和span::after新增動畫
效果同span的動畫一樣，只是動畫開始延遲0.3s，與span動畫形成前後關係即可
span::before, span::after {
animation: loading 0.6s 0.3s linear infinite alternate;
}
@keyframes loading {
0% {
height: 64px;
}
100% {
height: 5px;
}
}
效果圖如下
步驟6
分離span::before和span::after
單獨再設定span::after
- 定位為span左邊20px處
- 動畫開始延遲時間為0.6s
span::after {
left: -20px;
animation-delay: 0.6s;
}
位置關係如下
最終效果為：
疑問解答
為什麼步驟四中 top: 50%; transform: translateY(-50%);可以將span::after、before固定頁面上下中間呢？
為了弄清楚原理
首先我們先假設span高度為20px，寬度為8px
before和after位置定位時只設置left為20px（高度為40px）
效果圖如下
然後為before和after設定top: 50%;
效果圖如下
可以發現右邊的before和after向下移動了，而實際移動的距離就span總長度20px一半（50%）的距離：10px
通過實際效果展示可以發現：此時span::before和span::after中設定的top為50%，基準是相對於span的
比如span長100px，如果before為top：50%，那麼就是向下移動100* 50% = 50px；如果span長40px，那麼before和after就下移20px
總之，top是相對於span進行參考的！
再設定 translateY(-50%);
效果圖如下
可以發現此時span和span::after、before中心處於同一軸線上
這是因為translateY(-50%)中的50%是指移動相對於自身的50%
此時before和after長為40px，那麼自身長度的50%為40*50%=20px
這樣一來，span和before、after中心就會處於同一水平線上
再一般的說
無論span長度為多少、span::before、span::after長度為多少，只要配合top: 50%; transform: translateY(-50%);，都可以使得它們中心處於同一水平線上
一般情況時：
結語
文章僅作為學習筆記，記錄從0到1的一個過程
希望對您有所幫助，如有錯誤歡迎小夥伴指正～
我是海轟ଘ(੭ˊᵕˋ)੭，如果您覺得寫得可以的話，請點個贊吧
謝謝支援️
