CSS3是現代網頁設計中不可或缺的一部分，其中的加載線條效果能夠增強用戶體驗。下面將介紹如何使用CSS3創建簡單的加載線條。
.loading-bar {
position: relative;
width: 200px;
height: 4px;
background-color: #e5e5e5;
margin: 20px auto;
}
.loading-bar::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background-color: #42b983;
animation: loading 3s linear infinite;
}
@keyframes loading {
from {
width: 0;
}
to {
width: 100%;
}
}以上代碼中，我們首先創建了一個
元素并設置了其樣式，接著使用:before偽元素創建了一個和
同樣寬度和高度的綠色線條。在關鍵幀動畫中，我們將線條寬度從0到100%進行動畫播放。最后通過將動畫無限循環，使得線條不斷地往復滾動。
這樣的加載線條，不僅美觀而且易于實現，非常適合在網站中使用。希望本文對你有所幫助。
上一篇css3加載html