Front End: Regarding the word on the progress bar, how does the color of the word change with the change of the background color

  javascript

Front End: On the question of the character on the progress bar, how does the color of the character change with the change of the background color? Ask the Great Spirit for advice, crab crab

The specific effects are as follows
图片描述

Even
图片描述

I mean, how to realize the front end, ask the great god for advice, crab crab

Think for a long time … probably OK …

<div class="bg">
 < span class="text">0 percent < /span >
 < divclass = "progress" style = "width: 0 percent;"  >
 < span class="text">0 percent < /span >
 </div>
 </div>
.text {
 position: absolute;
 left: 125px;
 Transform: translateX(-50 percent);
 font-size:25px;
 bracket
 
 .bg {
 background: #fff;
 border-radius: 5px;
 border: 1px solid #6cf;
 width : 250px;
 height: 50px;
 line-height: 50px;
 position: relative;
 bracket
 
 .bg > .text {
 color: #6cf;
 bracket
 
 .progress {
 position: absolute;
 Height: 100 percent;
 background: #6cf;
 overflow: hidden;
 bracket
 .progress > .text {
 color: #fff;
 bracket