CSS波浪進(jìn)度條是一種特殊的進(jìn)度條，它是通過(guò)CSS的動(dòng)畫特效創(chuàng)建的。用它可以增添網(wǎng)頁(yè)的美感和動(dòng)態(tài)性，同時(shí)也能提高用戶體驗(yàn)。

.progress-bar {
position: relative;
width: 100%;
height: 30px;
border-radius: 50px;
overflow: hidden;
background-color: #e4e4e4;
}
.progress-fill {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50px;
background-color: #4caf50;
animation: fill 2s ease-out;
animation-delay: 1s;
}
.progress-fill::before {
content: "";
position: absolute;
left: -50%;
width: 200%;
height: 100%;
background: linear-gradient(to right, transparent 50%, #fff 50%);
transform: rotate(45deg);
animation: wave 2s linear infinite;
}
@keyframes fill {
0% {
width: 0%;
}
100% {
width: 75%;
}
}
@keyframes wave {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

在CSS樣式中，創(chuàng)建一個(gè)有圓角邊框的長(zhǎng)方形，也就是.progress-bar，使其包裹著進(jìn)度條。與此同時(shí)，也需要?jiǎng)?chuàng)建一個(gè)叫做.progress-fill的偽元素，它會(huì)在填充完整的層之前等待一段時(shí)間。設(shè)置動(dòng)畫時(shí)，讓.progress-fill的高度由0%變?yōu)?00%，并用緩動(dòng)函數(shù)緩慢地填充。

關(guān)鍵部分是.progress-fill::before，它是一個(gè)偽元素，用于創(chuàng)建波浪的效果。在原始位置上的正方形可以使任何線性漸變填充半個(gè)左側(cè)。再使用rotate變換。這個(gè)旋轉(zhuǎn)效果與圖形上半部分的填充形狀相同。之后使用animation，以動(dòng)畫的形式不斷地運(yùn)行。

在動(dòng)畫中，用CSS變量方法更改現(xiàn)有屬性的值，例如顏色和位置。在這種情況下，這些變量指定了波數(shù)，振幅和速度。如果想要加入更多的波動(dòng)效果，可以嘗試更改變量的值。