Question

我在我的网站上使用javascript doughnutData。我已经成功地将超彩虹应用于文本（一种改变文本颜色的效果）。无论如何都要在javascript中定位颜色值并应用CSS3彩虹效果？

var doughnutData = [
                                {
                                    value: 70,
                                    color:"#74cfae"
                                }

我使用的关键帧代码如下：

-webkit-animation: super-rainbow 2s infinite linear;
    -moz-animation: super-rainbow 2s infinite linear;
    -o-animation: linear-super-rainbow 2s infinite linear;
    -ms-animation: linear-super-rainbow 2s infinite linear;
}

    @-webkit-keyframes super-rainbow {
    0% {
        color: #333;
    }
    20% {
        color:#06C;
    }
    40% {
        color:#090;
    }
    60% {
        color:#FC0;
    }
    80% {
        color:#F00;
    }
    100% {
        color:#606;
    }
    }
@-moz-keyframes super-rainbow {
    0% {
        color: #333;
    }
    20% {
        color:#06C;
    }
    40% {
        color:#090;
    }
    60% {
        color:#FC0;
    }
    80% {
        color:#F00;
    }
    100% {
        color:#606;
    }
}
    @-o-keyframes super-rainbow {
    0% {
        color: #333;
    }
    20% {
        color:#06C;
    }
    40% {
        color:#090;
    }
    60% {
        color:#FC0;
    }
    80% {
        color:#F00;
    }
    100% {
        color:#606;
    }
    }
    @-ms-keyframes super-rainbow {
    0% {
        color: #333;
    }
    20% {
        color:#06C;
    }
    40% {
        color:#090;
    }
    60% {
        color:#FC0;
    }
    80% {
        color:#F00;
    }
    100% {
        color:#606;
    }
}

Answer 1

您要使用的库（chart.js）使用canvas对象进行绘制。这意味着什么，用几句话说：内容不是基于HTML的。

会导致什么：如果它不是HTML，则CSS不适用于它......

chart.js使用Canvas，并将图表绘制为原始图形（直线，正方形，圆形，椭圆形......）。它们不包含div，ul，span ......这是一个很好的理由：渲染更快，更可控。

但是，正因如此，您的问题的答案是no。你所做的那种效果不能在属性中设置，因为它不起作用。

使用CSS3关键帧super-rainbow来改变javascript doughnutData的颜色

1 个答案: