CSS：如何比較自定義屬性的值並根據該值申請styles？

Question

我正在嘗試在 CSS 中構建一個狀態欄。該欄顯示完成/剩余的百分比，並且有這樣的高端欄： |=========----------------| . 它使用兩個 colors 和一個漸變來顯示完成百分比。

我已將當前百分比定義為 CSS 自定義屬性： --percent 。 通過 javascript 更改此屬性會更改漸變填充，從而更新欄的顯示。

高端欄的顏色基於狀態欄的開始和結束 colors。

當--percent達到 100% 時，我想將結束欄更改為正確的填充顏色。 CSS 中有沒有一種方法可以將--percent值與“100%”進行比較，並對結束欄應用不同的樣式以更改其顏色？

正如您在下面的示例中看到的，當--percent達到 100% 時，右側的欄不會更改 colors。 我試圖避免 javascript 來解決這個問題，因為如果可能的話我更喜歡 CSS 解決方案。

 // Animate the status bar. var percent = 0; setInterval(function() { $('.line').css('--percent', `${percent}%`); percent += 0.1; if (percent > 100) { percent = 0; } }, 10);

 .line { /* Customize the line with these custom properties: */ --line-thickness: 7px; --bar-height: calc(var(--line-thickness) * 4); /* --bar-height: 40px; */ --start-color: purple; --end-color: green; --percent: 0%; display: flex; justify-content: space-between; width: 50%; height: var(--line-thickness); background-color: var(--start-color); margin-top: var(--bar-height); margin-bottom: var(--bar-height); margin-left: var(--line-thickness); margin-right: var(--line-thickness); background: linear-gradient(90deg, var(--start-color) 0%, var(--start-color) var(--percent), var(--end-color) var(--percent)); }.line.left, .line.right { width: var(--line-thickness); height: var(--bar-height); margin-top: calc((var(--bar-height) - var(--line-thickness)) / -2); /* border: 1px solid white; */ }.line.left { background-color: var(--start-color); margin-left: calc(var(--line-thickness) * -1); }.line.right { background-color: var(--end-color); margin-right: calc(var(--line-thickness) * -1); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="line"> <div class="left"></div> <div class="right"></div> </div>

Answer 1

我會使用蒙版構建形狀，任務會很容易。 為了演示，我還將 jQuery animation 替換為 CSS animation 但您可以保留它並調整background-size以控制進度

 .line { --line: 7px; --bar-height: calc(var(--line) * 4); --start-color: purple; --end-color: green; width: 50%; height: var(--bar-height); -webkit-mask: conic-gradient(at left var(--line) bottom var(--line),#0000 25%,#000 0) 0 0/calc(100% - var(--line)) calc(100% - var(--bar-height)/2 + var(--line)/2); background: linear-gradient(var(--start-color) 0 0) 0 0/0% 100% no-repeat var(--end-color); animation: fill 5s linear infinite; } @keyframes fill { to {background-size:100% 100%} }

 <div class="line"></div>