CSS3小球進(jìn)度條是一種簡(jiǎn)單而又能夠增加頁(yè)面美感的進(jìn)度條。使用CSS3中的animation屬性和偽元素:before和:after，我們能夠輕松地實(shí)現(xiàn)這一功能。

.progress-bar {
width: 100%;
height: 20px;
background-color: #f2f2f2;
border-radius: 10px;
position: relative;
}
.progress-bar:before {
content: "";
position: absolute;
top: -5px;
left: 0;
width: 15px;
height: 15px;
border-radius: 50%;
background-color: #1abc9c;
animation: progress-bar 2s ease-in-out infinite;
}
@keyframes progress-bar {
0% {
left: 0;
}
50% {
left: 50%;
}
100% {
left: 100%;
}
}

首先，我們創(chuàng)建了一個(gè)容器.progress-bar，并設(shè)置了它的樣式。然后，我們使用偽元素:before來(lái)創(chuàng)建一個(gè)圓形小球，并設(shè)置它的樣式和動(dòng)畫(huà)。在樣式中，我們給小球設(shè)置了border-radius:50%來(lái)獲得圓形的效果，而 animation:progress-bar 2s ease-in-out infinite;則是讓小球產(chǎn)生動(dòng)畫(huà)效果。在@keyframes規(guī)則中，我們定義了小球在不同時(shí)間點(diǎn)的位置，從而實(shí)現(xiàn)了小球在進(jìn)度條上的移動(dòng)。

最后，通過(guò)HTML中的一行代碼即可使用CSS3小球進(jìn)度條。

<div class="progress-bar"></div>

這樣，我們就成功地創(chuàng)建了一個(gè)簡(jiǎn)單而且美觀的CSS3小球進(jìn)度條。