您可能想考虑一下这将如何影响用户体验,但是这个:http: //jsfiddle.net/7Xuep/6/
好的,所以使用 CSS 动画旋转彩虹的所有颜色很容易。然后问题是将它们链接到所有跨度标签,以便动画在正确的位置开始。(即你需要绿色字母从绿色等开始它的动画。)为此,我们可以使用animation-delay
:
https://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay
我们可以使用它为每个字母以适当的颜色启动彩虹动画。通过使用linear
计时功能,很容易确定动画将在什么时间到达每种颜色。因此,只需animation-delay
为每个<span>
元素附加正确的值即可。我通过获取您已经生成的 HTML 并将 CSS 规则添加到每个元素的style
属性来做到这一点:
var animTime = 6, // time for the animation in seconds
hueChange = 3, // the hue change from one span element to the next
prefixes = ["", "-webkit-", "-moz-", "-o-"],
numPrefixes = prefixes.length;
$('.unicorn').find('span').each(function (i) {
for (var j = 0; j < numPrefixes; j++) {
$(this).css(prefixes[j] + 'animation-delay', (animTime * ((i * hueChange) % 360) / 360) - animTime + 's');
}
});
但是您可以在生成所有span
元素的同时执行此操作。那么这只是一个使用CSS设置动画的例子:
.unicorn:hover span {
animation: colorRotate 6s linear 0s infinite;
}
@keyframes colorRotate {
from {
color: rgb(255, 0, 0);
}
16.6% {
color: rgb(255, 0, 255);
}
33.3% {
color: rgb(0, 0, 255);
}
50% {
color: rgb(0, 255, 255);
}
66.6% {
color: rgb(0, 255, 0);
}
83.3% {
color: rgb(255, 255, 0);
}
to {
color: rgb(255, 0, 0);
}
}
所有这一切都让我们来到这里:http: //jsfiddle.net/P6WVg/7/
现在,如果您不想在有人不再悬停时重置颜色,.unicorn
那么您可以使用animation-play-state
:
https://developer.mozilla.org/en-US/docs/Web/CSS/animation-play-state
但是,我发现 Chrome 在将初始值-webkit-animation-play-state:paused;
和负值组合在一起时存在问题,-webkit-animation-delay
以至于它只显示第一帧(即color: rgb(255,0,0);
在这种情况下)。因此,我不得不使用事件监听器在第一次悬停时添加一个包含动画 CSS 的类,这导致我们:
http://jsfiddle.net/7Xuep/6/
(可以在此处跟踪 chrome 中的错误:https ://code.google.com/p/chromium/issues/detail?id=269340 )