Front end: with regard to the question of the words on the progress bar, how does the color of the words change with the background color?

Front end: with regard to the question of the words on the progress bar, how does the color of the words change with the background color? ask for advice. Crab

the specific effect is as follows:


I mean, how to achieve the front end, ask for advice from God, crab

Javascript html css
Mar.20,2021
I thought about it for a long time. Probably OK. 

<div class="bg">
  <span class="text">0%</span>
  <div class="progress" style="width: 0%;">
    <span class="text">0%</span>
  </div>
</div>
.text {
  position: absolute;
  left: 125px;
  transform: translateX(-50%);
  font-size:25px;
}

.bg {
  background: -sharpfff;
  border-radius: 5px;
  border: 1px solid -sharp6cf;
  width : 250px;
  height: 50px;
  line-height: 50px;
  position: relative;
}

.bg > .text {
  color: -sharp6cf;
}

.progress {
  position: absolute;
  height: 100%;
  background: -sharp6cf;
  overflow: hidden;
}
.progress > .text {
  color: -sharpfff;
}

emmmmm and other people before dinner, simply implemented one, but I don't know how the compatibility is. No, no, no. Css3's clip attribute

is mainly used. 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    div {
      width: 400px;
      height: 40px;
      line-height: 40px;
      text-align: center;
    }
    .progress-container {
      position: relative;
      border: 1px solid black;
      font-size: 28px;
    }
    .skyblue {
      position: absolute;
      top: 0;
      z-index: 1;
      background: skyblue;
      color: white;
    }
    .white {
      position: absolute;
      top: 0;
      z-index: 2;
      background: white;
      color: skyblue;
      clip: rect(auto auto auto 194px);
    }
  </style>
</head>
<body>
  <div class="progress-container">
    <div class="skyblue">50%</div>
    <div class="white">50%</div>
  </div>
</body>
</html>

the principle goes something like this:

the container of the package has two div
div under the same initial positioning that looks like this:

div :

then use js to adjust the attribute value in clip: rect (top, right, bottom, left) according to the progress. In this example, you adjust the left value

.

Previous: Several questions about JS snooping scroll to realize pull-down loading

Next: Why did eslint report the wrong no-mixed-operators?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu