html - 如何用纯css实现一个带有倒文字颜色的灵活进度条？

Question

我正在使用纯 css 实现一个带有反转文本颜色的灵活进度条。

我的意思请看下面几笔。

CSS progress bar with inverted colors

CSS Progress bars

问题是这两个实现中的进度条都是固定宽度(固定宽度，可以设置.progress-text的长度/位置)，但我希望进度条的宽度为 100% 或其他一些相对长度。没有 JS，很难将上面的笔改编成我需要的东西。

我失败的实验是 here .您能否调整实现以使 .progress 支持像 50% 这样的相对宽度？

这是片段。谢谢@TheThirdMan。

body {
  background-color: #000;
}

h1 {
  text-align: center;
  font-family: "Trebuchet MS", Helvetica, sans-serif;
  font-weight: normal;
  margin: 50px 0 0;
  color: #fff;
}

.progress {
  position: relative;
  border: 0;
  width: 500px;
  height: 40px;
  line-height: 40px;
  margin: 100px auto;
  font-family: arial, sans-serif;
  font-weight: bold;
  font-size: 30px;
  background-color: #07A4DD;
  border-radius: 40px;
  overflow: hidden;
}
.progress .progress-text {
  position: absolute;
  top: 0;
  width: 500px;
  text-align: center;
  color: #fff;
  font-variant: small-caps;
}
.progress .progress-bar {
  height: 100%;
  overflow: hidden;
  width: 54%;
  background-color: #fff;
  border-radius: inherit;
  overflow: hidden;
  position: relative;
  -webkit-animation: animate 4s;
          animation: animate 4s;
}
.progress .progress-bar .progress-text {
  color: #07A4DD;
}

@-webkit-keyframes animate {
  0% {
    width: 0%;
  }
}

@keyframes animate {
  0% {
    width: 0%;
  }
}

<h1>Flexible CSS progress bar with inverted colors</h1>
<div class="progress">
  <div class="progress-text">Progress</div>
  <div class="progress-bar">
    <div class="progress-text">Progress</div>
  </div>
</div>
  
     

---

感谢@AndrewBone 的回答。但是我有一些理由不在这个问题中使用vw:

1. 我们之前尝试过 vw 来解决其他问题，但是一些 android 设备不支持它，所以我们放弃了它。
2. 有一些情况，如果不是很多的话，.progress 的父级与视口(viewport)的宽度不成比例。

---

这是我的实验。我的想法类似于 CSS Progress bars .

这个想法是:

• .progress-text 都是绝对定位的，并且与 .progress 一样宽。
• 第一个.progress-text是白色的，作为背景存在于.progress中。
• 第二个.progress-text为蓝色文字，被.progress-bar截断。

这些导致:

• .progress-bar 必须相对定位才能截取 .progress-text。
• .progress-text 无法获得 .progress 的宽度，因为它(绝对)定位到 .progress-bar 而不是 .进度.

所以:

• 如果 .progress 是固定宽度(例如 $bar-width: 500px)，我可以将 .progres-text 居中将其宽度设置为与 .progress 的宽度相同。
• 如果 .progress 是相对宽度的(例如 $bar-width: 50%)，我应该怎么做才能让它工作？

Answer 1

好的，这是一个想法，我在这里可能是错的，请随时纠正我。 vw ( REF ) 是一个奇特的 CSS3 东西，表示视口(viewport)宽度，在下面的示例中使用 75vw，表示视口(viewport)宽度的 75%。它有效，并且在您更改页面时大小会响应。

最重要的是，我添加了一个 CSS 变量，这样我只需要在测试期间输入一次。 CSS 变量是新的和 Shiny 的，但还没有在所有浏览器中使用 (REF)

:root {
  --progress-width: 75vw;
}
body {
  background-color: #000;
}
h1 {
  text-align: center;
  font-family: "Trebuchet MS", Helvetica, sans-serif;
  font-weight: normal;
  margin: 50px 0 0;
  color: #fff;
}
.progress {
  position: relative;
  border: 0;
  width: var(--progress-width, 500px);
  height: 40px;
  line-height: 40px;
  margin: 100px auto;
  font-family: arial, sans-serif;
  font-weight: bold;
  font-size: 30px;
  background-color: #07A4DD;
  border-radius: 40px;
  overflow: hidden;
}
.progress .progress-text {
  position: absolute;
  top: 0;
  width: var(--progress-width, 500px);
  text-align: center;
  color: #fff;
  font-variant: small-caps;
}
.progress .progress-bar {
  height: 100%;
  overflow: hidden;
  width: 54%;
  background-color: #fff;
  border-radius: inherit;
  overflow: hidden;
  position: relative;
  -webkit-animation: animate 4s;
  animation: animate 4s;
}
.progress .progress-bar .progress-text {
  color: #07A4DD;
}
@-webkit-keyframes animate {
  0% {
    width: 0%;
  }
}
@keyframes animate {
  0% {
    width: 0%;
  }
}

<div class="progress">
  <div class="progress-text">Progress</div>
  <div class="progress-bar">
    <div class="progress-text">Progress</div>
  </div>
</div>

希望这对您有所帮助。