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的長度從短變長再變短
具體設置：
- 初始狀態(tài)：高度64px
- 末尾狀態(tài)：高度5px
動畫設置為
- 持續(xù)時間0.6s
- 開始延遲0s
- 速度曲線：linear，均勻變化
- 無限循環(huán)
- 動畫交替進行
animation: loading 0.6s 0s linear infinite alternate;
@keyframes loading {
0% {
height: 64px;
}
100% {
height: 5px;
}
}
效果圖如下
注：產(chǎn)生上述條件的前提是海轟事先將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動畫生效時，效果如下
可以發(fā)現(xiàn)：右邊的白色部分最上部分一直與左邊最上部分處于同一水平線
步驟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%;
效果圖如下
可以發(fā)現(xiàn)右邊的before和after向下移動了，而實際移動的距離就span總長度20px一半（50%）的距離：10px
通過實際效果展示可以發(fā)現(xiàn)：此時span::before和span::after中設置的top為50%，基準是相對于span的
比如span長100px，如果before為top：50%，那么就是向下移動100* 50% = 50px；如果span長40px，那么before和after就下移20px
總之，top是相對于span進行參考的！
再設置 translateY(-50%);
效果圖如下
可以發(fā)現(xiàn)此時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%);，都可以使得它們中心處于同一水平線上
一般情況時：
結(jié)語
文章僅作為學習筆記，記錄從0到1的一個過程
希望對您有所幫助，如有錯誤歡迎小伙伴指正～
我是海轟?(?ˊ?ˋ)?，如果您覺得寫得可以的話，請點個贊吧
謝謝支持??
