html：
<!--进度条--><div class="progress-wrap"> <div class="progress-inner"> <div class="progress-nums"></div> </div> <span>60%</span></div>
css：
/进度条/ .progress-wrap { width: 100%; height: 12px; border-radius: 8px; position: relative; } .progress-wrap span{ position:absolute; left:50%; top:-20px; color:#000; } /进度条底层背景样式/ .progress-inner { height: inherit; background: rgb(142 193 255 / 20%); border-radius: 8px; } /进度层样式效果，利用动画效果/ .progress-nums { width: 60%; height: inherit; border-radius: 6px; background: repeating-linear-gradient(-45deg, #008bdd 25%, #49beff 0, #49beff 50%, #008bdd 0, #008bdd 75%, #49beff 0); background-size: 16px 16px; animation: panoramic 30s linear infinite; } /定义动画/ @keyframes panoramic{ to { background-position: 200% 0; } }
上篇：css 渐变跟随鼠标光标按钮动画
