css 实现炫酷的条纹进度条效果 _css

效果图：

文章插图

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 实现炫酷的条纹进度条效果】