最新公告
  • 欢迎您的光临,本站秉承服务宗旨 履行“站长”责任,资源提供永无止境!立即赞助我们
  • CSS3彩色进度条动画特效漂亮的进度条特效

    广告!请自辨真伪
    广告!请自辨真伪 广告!请自辨真伪

    CSS3彩色进度条动画特效漂亮的进度条特效

    这是一款 css3 彩色进度条动画特效。该 CSS3 进度条动画特效中包含了三种动画特效,它们通过 HMTL 代码和简单的 CSS3 来实现彩色进度条的不同动画效果。

    HTML 结构

    <div class="container">    
      <div class="progress progress-striped">
        <div class="progress-bar">
        </div>                       
      </div> 
    </div>
     
    <div class="container">    
      <div class="progress2 progress-moved">
        <div class="progress-bar2" >
        </div>                       
      </div> 
    </div>
     
    <div class="container">    
      <div class="progress progress-infinite">
        <div class="progress-bar3" >
        </div>                       
      </div> 
    </div>
    

    css 样式

    body {
      font-family: 'Montserrat', sans-serif;
      background: #2c303a;
    }
     
    .container {
      margin: 100px auto;
      width: 500px;
      text-align: center;
    }
     
    .progress {
      padding: 6px;
      background: rgba(0, 0, 0, 0.25);
      border-radius: 6px;
      box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
    }
     
    .progress-bar {
      height: 18px;
      background-color: #ee303c;
      border-radius: 4px;
      transition: 0.4s linear;
      transition-property: width, background-color;
    }
     
    .progress-striped .progress-bar {
      background-color: #FCBC51;
      width: 100%;
      background-image: linear-gradient(45deg, #fca311 25%, transparent 25%, transparent 50%, #fca311 50%, #fca311 75%, transparent 75%, transparent);
      animation: progressAnimationStrike 6s;
    }
     
    @keyframes progressAnimationStrike {
      from {
        width: 0;
      }
      to {
        width: 100%;
      }
    }
    .progress2 {
      padding: 6px;
      border-radius: 30px;
      background: rgba(0, 0, 0, 0.25);
      box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
    }
     
    .progress-bar2 {
      height: 18px;
      border-radius: 30px;
      background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
      transition: 0.4s linear;
      transition-property: width, background-color;
    }
     
    .progress-moved .progress-bar2 {
      width: 85%;
      background-color: #EF476F;
      animation: progressAnimation 6s;
    }
     
    @keyframes progressAnimation {
      0% {
        width: 5%;
        background-color: #F9BCCA;
      }
      100% {
        width: 85%;
        background-color: #EF476F;
      }
    }
    .progress-bar3 {
      height: 18px;
      border-radius: 4px;
      background-image: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #7DC8E8, #5856d6, #ff2d55);
      transition: 0.4s linear;
      transition-property: width, background-color;
    }
     
    .progress-infinite .progress-bar3 {
      width: 100%;
      background-image: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #7DC8E8, #5856d6, #ff2d55);
      animation: colorAnimation 1s infinite;
    }
     
    @keyframes colorAnimation {
      0% {
        background-image: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #7DC8E8, #5856d6, #ff2d55);
      }
      20% {
        background-image: linear-gradient(to right, #5ac8fa, #007aff, #7DC8E8, #5856d6, #ff2d55, #4cd964);
      }
      40% {
        background-image: linear-gradient(to right, #007aff, #7DC8E8, #5856d6, #ff2d55, #4cd964, #5ac8fa);
      }
      60% {
        background-image: linear-gradient(to right, #7DC8E8, #5856d6, #ff2d55, #4cd964, #5ac8fa, #007aff);
      }
      100% {
        background-image: linear-gradient(to right, #5856d6, #ff2d55, #4cd964, #5ac8fa, #007aff, #7DC8E8);
      }
    }

    Codepen 网址

    常见问题FAQ

    免费下载或者赞助VIP会员专享资源能否直接商用?
    本站所有资源均收集与各大平台,版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 赞助VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    开通赞助会员或者下载源码 “不完整” 或 “不能用” “版本号不对” 怎么办?
    非常抱歉,资源均收集与网络,你有权利告诉本站,但是本站有选择处理或者不处理的权力,如无法接受请不要购买或开通本站会员。
    开通终身赞助会员能下载全站资源码?
    可以100%下载全站源码资源的,除部分失效资源,失效的可以联系客服尝试恢复。

    发表评论

    • 18093会员总数(位)
    • 20982资源总数(个)
    • 330本周发布(个)
    • 3 今日发布(个)
    • 534稳定运行(天)

    提供最优质的资源集合

    立即查看 了解详情
    赞助SVIP享更多特权立即赞助