css 进度条的文字根据进度渐变的示例代码

本文介绍了css 进度条的文字根据进度渐变的示例代码，分享给大家，具体如下：

需求

1.进度条里面的文字需要根据进度的长度而变化

原理

用两个一模一样的样式的 div 重叠起来

效果

字体开始为 蓝色，跟随进度条变为 白色

代码

    
    
    
    
    
 * {
     box-sizing: border-box;
 }
 .box{
     position: fixed;
     left: 50%;
     transform: translate(-50%);
     width: 320px;
     height: 44px;
     background-color: white;
     color: #00a0e9;
     border: 1px solid #00a0e9;
 }
 .process{
     position: absolute;
     height: 100%;
     width: 0;
     background: #00a0e9;
     color: white;
     overflow: hidden;
     z-index: 10;
 }
 .process-text{
     position: absolute;
     left: 160px;
     top: 50%;
     font-size: 12px;
     transform: translate(-50%, -50%);
     white-space: nowrap;
 }
    

    





    
 点击开始
    
    点击开始

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。