CSS：如何比较自定义属性的值并基于该值应用样式？

ijxebb2r 于 2023-01-27 发布在其他

关注(0)|答案(1)|浏览(135)

我尝试在CSS中建立一个状态栏。该栏显示已完成/剩余的百分比，并有如下的高结束栏：|=========----------------|。它使用两种颜色和一个渐变来显示完成的百分比。
我已经将当前百分比定义为CSS自定义属性：--percent。通过javascript更改此属性将更改渐变填充，从而更新条形图的显示。
高端栏的颜色基于状态栏的开始颜色和结束颜色。
当--percent达到100%时，我想将结束条更改为正确的填充颜色。在CSS中有没有一种方法可以将--percent值与"100%"进行比较，然后对结束条应用不同的样式以更改其颜色？
正如你在下面的例子中所看到的，当--percent达到100%时，右边的条不会改变颜色。我试图避免使用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>

css

来源：https://stackoverflow.com/questions/75221755/css-how-to-compare-the-value-of-a-custom-property-and-apply-styles-based-on-the

1条答案

按热度按时间

dldeef671#

我会使用mask来构建形状，任务会很简单。为了演示起见，我还用CSS动画替换了jQuery动画，但您可以保留它，并调整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>

赞(0）回复(0）举报 2023-01-27

我来回答

CSS：如何比较自定义属性的值并基于该值应用样式？

1条答案

相关问题

热门标签

最新问答