前言
??實(shí)現(xiàn)一個(gè)音頻loading動(dòng)畫(huà)還蠻有趣的，速速來(lái)Get吧~
??文末分享源代碼。記得點(diǎn)贊+關(guān)注+收藏！
1.實(shí)現(xiàn)效果
在這里插入圖片描述
2.實(shí)現(xiàn)步驟
- 定義css變量：父容器高度為--h，可以動(dòng)態(tài)設(shè)置loading的高度
:root {
--h: 80px;
}
- 父容器flex橫向布局，豎向居中，添加15個(gè)span標(biāo)簽（可以自行設(shè)置更多的個(gè)數(shù)，這里展示15個(gè)）
<div class="container">
<span></span>
//...共15個(gè)
<span></span>
</div>
.container {
display: flex;
align-items: center;
position: relative;
height: var(--h);
}
- span設(shè)置圓角，初始高度為 h20%*，圓角為高度的二分之一，設(shè)置背景漸變色，span標(biāo)簽間隔4px，最后一個(gè)span標(biāo)簽設(shè)置右邊距為0
在這里插入圖片描述
.container span {
background: linear-gradient(to top, #d299c2 0%, #fef9d7 100%);
width: 4px;
height: 20%;
border-radius: calc(var(--h) * 0.2 * 0.5);
margin-right: 4px;
}
.container span:last-child {
margin-right: 0px;
}
- 修改span標(biāo)簽的高度，實(shí)現(xiàn)上下波動(dòng)
在這里插入圖片描述
- 為每個(gè)span標(biāo)簽設(shè)置高度變化的動(dòng)畫(huà)，20%到100%的變化，背景漸變色的變化，圓角的變化
在這里插入圖片描述
@keyframes loading {
0% {
background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%);
height: 20%;
border-radius: calc(var(--h) * 0.2 * 0.5);
}
50% {
background-image: linear-gradient(to top, #d299c2 0%, #fef9d7 100%);
height: 100%;
border-radius: calc(var(--h) * 1 * 0.5);
}
100% {
background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%);
height: 20%;
border-radius: calc(var(--h) * 0.2 * 0.5);
}
}
- 通過(guò)為span標(biāo)簽設(shè)置不同的動(dòng)畫(huà)延遲，實(shí)現(xiàn)此起彼伏的效果
- 由中間向兩側(cè)進(jìn)行波動(dòng)，15個(gè)標(biāo)簽，中間數(shù)為第八個(gè)，為第八個(gè)span設(shè)置動(dòng)畫(huà)延時(shí)為0s，依次向兩邊增加延遲時(shí)間，即總標(biāo)簽數(shù)的中間數(shù)字不延遲，兩側(cè)進(jìn)行動(dòng)畫(huà)延遲
在這里插入圖片描述
- 按照上述規(guī)則為span標(biāo)簽定義css變量--d
<div class="container">
<span style="--d: 7"></span>
//...,6,5,4,3,2,
<span style="--d: 1"></span>
<span style="--d: 0"></span>
<span style="--d: 1"></span>
//...,2,3,4,5,6,
<span style="--d: 7"></span>
</div>
- 為span標(biāo)簽設(shè)置動(dòng)畫(huà)延遲，延遲為0.2s * d,這樣就完成了啦~
在這里插入圖片描述
.container span {
+ animation-delay: calc(0.2s * var(--d));
}
3.實(shí)現(xiàn)代碼
<!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" />
<title>CSS 實(shí)現(xiàn)音頻loding動(dòng)畫(huà)</title>
</head>
<link rel="stylesheet" href="../common.css" />
<style>
:root {
--h: 80px;
}
.container {
display: flex;
align-items: center;
position: relative;
height: var(--h);
}
.container span {
background: linear-gradient(to top, #d299c2 0%, #fef9d7 100%);
width: 4px;
height: 20%;
border-radius: calc(var(--h) * 0.2 * 0.5);
margin-right: 4px;
animation: loading 2.5s infinite linear;
animation-delay: calc(0.2s * var(--d));
}
.container span:last-child {
margin-right: 0px;
}
@keyframes loading {
0% {
background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%);
height: 20%;
border-radius: calc(var(--h) * 0.2 * 0.5);
}
50% {
background-image: linear-gradient(to top, #d299c2 0%, #fef9d7 100%);
height: 100%;
border-radius: calc(var(--h) * 1 * 0.5);
}
100% {
background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%);
height: 20%;
border-radius: calc(var(--h) * 0.2 * 0.5);
}
}
</style>
<body>
<div class="container">
<span style="--d: 7"></span>
<span style="--d: 6"></span>
<span style="--d: 5"></span>
<span style="--d: 4"></span>
<span style="--d: 3"></span>
<span style="--d: 2"></span>
<span style="--d: 1"></span>
<span style="--d: 0"></span>
<span style="--d: 1"></span>
<span style="--d: 2"></span>
<span style="--d: 3"></span>
<span style="--d: 4"></span>
<span style="--d: 5"></span>
<span style="--d: 6"></span>
<span style="--d: 7"></span>
</div>
</body>
</html>
