如何在CSS中动态显示这个条形图的颜色?

pinkon5k  于 2023-01-03  发布在  其他
关注(0)|答案(3)|浏览(130)

我有一个正在耗尽的条形图,我想设置它的动画效果,但是我想随着时间的推移改变条形图的颜色。
我试着这么做:

@keyframes colorChange {
   0% { background-color: green; }
  50% { background-color: yellow; }
  100% { background-color: red; }
}

但它不工作。我该怎么解决这个问题?https://codepen.io/gamerm83/pen/XWBKYyQ

relj7zay

relj7zay1#

您应该删除、移动或合并它们。

.round-time-bar[data-style="smooth"] div {
    animation: roundtime calc(var(--duration) * 1s) linear forwards;
}
.round-time-bar div {
  animation: colorChange 1s infinite;
}

第一个CSS规则将名为“roundtime”的动画应用于类为.round-time-bar且data-style属性的值为“smooth”的元素内的所有div元素。第二个CSS规则将名为“colorChange”的动画应用于类为.round-time-bar的元素内的所有div元素。但是,第一个规则优先于第二个规则。因此,第一个规则中指定的动画将应用于满足第一个规则中指定的条件的所有div元素,而不管它们是否也满足第二个规则中指定的条件。

ni65a41a

ni65a41a2#

正如阿迪L提到,你不能合并2动画一次例如:-

@keyframes move {
    0%, 100% { transform: translateX(0px); }
    50% { transform: translateX(50px); }
}
@keyframes skew {
    0%, 100% { transform: skewX(0deg); }
    50% { transform: skewX(15deg); }
}
@keyframes opacity {
    0%, 100% { opacity: 1; }
    50% { opacity: .25; }
}

你必须为它们的每个关键帧制作3个div

.div_class
{
    animation:animate1 1000ms linear infinite;
}

.element
{     
   animation:animate2 3000ms linear infinite;
}

Src is the accepted answer
因此,只需更改选择器名称即可解决问题
here is a fork working perfectly with perfect timing.
编辑第87行

.round-time-bar[data-style="smooth"] div.wrapper {
  animation: roundtime calc(var(--duration) * 1s) linear forwards;
}

.round-time-bar[data-style="smooth"] {
  animation: roundtime calc(var(--duration) * 1s) linear forwards;
}

这修复了问题

jexiocij

jexiocij3#

你需要到 Package 这条,并且缩放这 Package .为这颜色变化你能应用在. bar

.bar{
width:100%;
height:100%;
animation: anim 1s infinite;
transform-origin:center;
}

@keyframes anim{
0%{
background-color:red
}
50%{
background-color:green
}
100%{
background-color:yellow
}
}
.wrapper{
width:100%;
height:4px;
animation: scale 1s infinite;
}
@keyframes scale{
to{
transform:scaleX(0);
}
}
<div class="wrapper">
<div class="bar"></div>
</div>

相关问题