css3加载线条

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%进行动画播放。最后通过将动画无限循环，使得线条不断地往复滚动。

这样的加载线条，不仅美观而且易于实现，非常适合在网站中使用。希望本文对你有所帮助。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！