最终效果
创建进度条的步骤
-
创建一个元素并。
<div class='prog'></div>.prog { width: 300px; height: 30px; } -
在
background-image中使用linear-gradient属性创建一个半透明的渐变层(该层背景是为了是进度条具有视觉上的3D效果，可不加)。.prog { background-image: linear-gradient(hsla(0, 0%, 100%, 0.05) 5%, hsla(0,0%,100%,.75) 30%, hsla(0,0%,100%,0.2), hsla(0,0%,100%,0)); } -
继续在
background-image中使用linear-gradient创建一层背景，该背景为滚动条的底色，为两种颜色的条纹，效果如下图所示(图中增加了一圈内阴影)。.prog { background-image: linear-gradient(hsla(0, 0%, 100%, 0.05) 5%, hsla(0,0%,100%,.75) 30%, hsla(0,0%,100%,0.2), hsla(0,0%,100%,0)), linear-gradient(90deg, #50ff00 50%, #eee 0); } 将
background-size设置为200% 100%,这样进度条中完成部分和未完成部分的长度均为100%，这样便可以通过后续修改background-position来达到进度条滚动的效果。-
设置过渡动画，定义
keyframes修改background-position从100%到0%，使用线性速度播放动画便完成了最终的滚动条。.prog { animation:prog 6s linear infinite; } @keyframes prog { from {background-position: 100%;} to {background-position: 0%;} }
tips
多层background-image
使用多层background-image时先定义的背景层在上方，后定义的背景层在下方。
