我正在尝试一些文字,根据HSL 0deg和360deg之间的计算位置对每个字母进行颜色,并且悬停在右侧的颜色.我知道这很奇怪,但是忍受我.我想要的是悬停的动画彩虹文字.
我已经涵盖了使所有这一切发生一次的逻辑,但不能使悬停循环行为工作.
这里是一个链接到codepen.io：http://cdpn.io/txmlf
我已经尝试使用JavaScript鼠标事件和jQuery的.hover().我最初的想法是设置一个鼠标进入的间隔,并在退出时清除它.
我真的很感谢任何关于这个非常重要的项目的帮助.
解决方法
好吧,所以旋转彩虹的所有颜色是足够容易使用CSS动画.问题是将它们连接到所有的span标签,使动画从正确的地方开始. (即,您需要绿色字母从颜色绿色开始它的动画等)要做到这一点,我们可以使用animation-delay：
https://developer.mozilla.org/en-US/docs/Web/CSS/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);
}
16.6% {
color: rgb(255,255);
}
33.3% {
color: rgb(0,255);
}
50% {
color: rgb(0,255,255);
}
66.6% {
color: rgb(0,0);
}
83.3% {
color: rgb(255,0);
}
to {
color: rgb(255,0);
}
}
所有这些让我们到这里：http://jsfiddle.net/P6WVg/7/
现在,如果你不想重置一次,一旦有人不再悬停在.unicorn,那么你可以使用动画播放状态：
https://developer.mozilla.org/en-US/docs/Web/CSS/animation-play-state
但是,我发现Chrome在将-webkit-animation-play-state的初始值相结合时出现问题：paused;和-webkit-animation-delay的负值,使得它刚刚显示第一帧(即颜色：rgb(255,0);在这种情况下)).因此,我不得不使用一个事件侦听器在第一个悬停上添加一个包含动画CSS的类,这样我们就可以：
(Chrome中的错误可以在这里跟踪：https://code.google.com/p/chromium/issues/detail?id=269340)
