css - 如何在单个文本行上进行多个 CSS 颜色转换？

Question

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

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

不仅仅是#000000到#FFFFFF，还有#000000→#FF0000→# 0000FF→#FFFFFF

如何在单个文本行上进行多个 CSS 颜色转换？

Answer 1

您需要使用 CSS Animations这允许您使用关键帧来定义多个状态变化。

你的例子看起来像这样:

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

这是一个 demo fiddle 包括 -webkit 前缀(为简洁起见在答案中省略)