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

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

原创2022-06-14 16:47·前端石三

效果图：

 

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%; x
    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;
    }
  }