如何使用纯CSS来实现带有反向文本颜色的灵活进度栏？

Question

我正在使用纯CSS实现一个灵活的进度条，其文本颜色为反色。

我的意思是请参考以下笔。

带有反色的CSS进度栏

CSS进度栏

问题是这两个实现中的进度条具有固定宽度 （具有固定宽度，可以设置.progress-text的长度/位置），但是我希望进度条的宽度为100%或其他相对宽度长度 。 没有JS很难适应我的需要。

我失败的实验去了这里 。 您可以调整实现以使.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的父.progress与视口的宽度不成比例。

---

这是我的实验。 我的想法类似于CSS进度栏 。

这个想法是：

• 这两个.progress-text都是绝对定位的，与.progress一样宽。
• 第一个.progress-text是白色.progress-text ，它作为背景位于.progress中。
• 第二个.progress-text是蓝色文本，由.progress-bar剪辑。

这些导致：

• .progress-bar必须相对.progress-text才能.progress-text 。
• .progress-text （绝对）位于.progress-bar而不是.progress ，因此无法获得.progress的宽度。

所以：

• 如果.progress具有固定宽度（例如$bar-width: 500px ），我可以通过将.progres-text的宽度设置为与.progress的宽度相同来.progress 。
• 如果.progress具有相对宽度（例如$bar-width: 50% ），我应该怎么做才能使其工作？

Answer 1

好，这是个主意，我在这里可能是错的，请随时纠正我。 vw （ REF ）是一个精美的CSS3，它意味着视口宽度，在下面的示例中使用了75vw，这意味着视口宽度的75％。 它可以工作，并且在您更改页面时大小可以响应。

最重要的是，我添加了一个CSS变量，以便在测试期间只需键入一次即可。 CSS变量是新事物，但并不是在所有浏览器中都可以使用（ 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> 

希望这可以帮助。