Question

我知道如何使用JS，但在http://daneden.github.io/animate.css/ Animate.css文本变化如此顺利，并且没有JS！

有人可以解释一下吗？

由于

Answer 1

h1 {
    color: #f35626;
    background-image: -webkit-linear-gradient(92deg, #f35626, #feab3a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-animation: hue 60s infinite linear;
}

@-webkit-keyframes hue {
    from {
      -webkit-filter: hue-rotate(0deg);
    }

    to {
      -webkit-filter: hue-rotate(360deg);
    }
}

这样的标记

<h1>CHANGE COLOR TEXT</h1>

您可以在此处查看示例：http://jsfiddle.net/3oqep26z/

修改动画时间以加快换色速度

Answer 2

我的猜测是它会与CSS3一起使用我在网上找到了这个

http://imajineweb.com/csstexthover

Answer 3

这是css3功能。不会到处工作

以某种风格设置动画：

-webkit-animation-duration: 10s;

将其命名为

-webkit-animation-name: colours;

以您需要的方式使用

@-webkit-keyframes colours {
      0% {background-color: #39f;}
     15% {background-color: #8bc5d1;}
     30% {background-color: #f8cb4a;}
     45% {background-color: #95b850;}
     60% {background-color: #944893;}
     75% {background-color: #c71f00;}
     90% {background-color: #bdb280;}
    100% {background-color: #39f;}
}

实施例： http://jsfiddle.net/gk37un0r/

CSS随机更改文本颜色

3 个答案: