.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%进行动画播放。最后通过将动画无限循环，使得线条不断地往复滚动。
这样的加载线条，不仅美观而且易于实现，非常适合在网站中使用。希望本文对你有所帮助。