如何在单个文本行上实现多个 CSS 颜色过渡？

Question

我试图在鼠标悬停时修改文本的颜色并进行多种颜色过渡，但我只能更改一种颜色。这是我的 CSS 片段。

\n\n

#text       {font:9px 'Arial'; color:#000000; transition-duration: 3s;}\n#text:hover {color:#FFFFFF;}\n

\n\n

不只是#000000到#FFFFFF，而是#000000\xe2\x86\ #FF0000x92 \xe2\x86 #0000FF\x92 \xe2\x86\x92#FFFFFF

\n\n

如何在单个文本行上实现多个 CSS 颜色过渡？

\n

Answer 1

您需要使用CSS 动画，它允许您使用关键帧来定义多个状态更改。

你的例子看起来像这样：

#text:hover {
    animation: 3s multicolor;
}
@keyframes multicolor {
    0% {
        color: #000;
    }
    33% {
        color: #FF0000;
    }
    66% {
        color: #0000FF;
    }
    100% {
        color: #FFF;
    }
}

这是一个包含 -webkit 前缀的演示小提琴（为简洁起见，在答案中省略了）