使用 JavaScript/jQuery 在悬停时循环显示颜色
我正在尝试获取一段文本,根据 HSL 0deg 和 360deg 之间的计算位置为每个字母着色,并在悬停时将颜色动画化到右侧。我知道这很奇怪,但请耐心等待。 我想要的是悬停时的动画彩虹文字。
我已经介绍了让所有这些都发生一次的逻辑,但是无法让悬停循环行为起作用。
这里是 codepen.io 的链接: http://cdpn.io/txmlf
我尝试过使用 JavaScript 鼠标事件和 jQuery 的 .hover()。我最初的想法是在鼠标进入时设置一个间隔并在退出时清除它。
对于这个显然非常重要的元素,我非常感谢任何帮助。
最佳答案
您可能想考虑这将如何影响用户体验,但关于这个呢:http://jsfiddle.net/7Xuep/6/
好的,使用 CSS 动画可以很容易地旋转彩虹的所有颜色。然后问题是将它们链接到所有 span 标签,以便动画在正确的位置开始。 (即你需要绿色字母从绿色等颜色开始它的动画)为此,我们可以使用 animation-delay
:
https://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay
我们可以用它来为每个字母以适当的颜色启动彩虹动画。通过使用 linear
计时功能,很容易确定动画到达每种颜色的时间。因此,这只是附加权利的问题 animation-delay
每个 <span>
的值(value)元素。为此,我只需获取您已经生成的 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 的类,这导致我们:
(可以在此处跟踪 chrome 中的错误:https://code.google.com/p/chromium/issues/detail?id=269340)
关于javascript - 彩虹色文字的循环动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19165364/