javascript – 彩虹文字的循环动画

循环颜色使用 JavaScript / jQuery

我正在尝试一些文字,根据HSL 0deg和360deg之间的计算位置对每个字母进行颜色,并且悬停在右侧的颜色.我知道这很奇怪,但是忍受我.我想要的是悬停的动画彩虹文字.

我已经涵盖了使所有这一切发生一次的逻辑,但不能使悬停循环行为工作.

这里是一个链接到codepen.io：http://cdpn.io/txmlf

我已经尝试使用JavaScript鼠标事件和jQuery的.hover().我最初的想法是设置一个鼠标进入的间隔,并在退出时清除它.

我真的很感谢任何关于这个非常重要的项目的帮助.

解决方法

你可能想想这将如何影响到UX,但是呢这样呢： http://jsfiddle.net/7Xuep/6/

好吧,所以旋转彩虹的所有颜色是足够容易使用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的类,这样我们就可以：

http://jsfiddle.net/7Xuep/6/

(Chrome中的错误可以在这里跟踪：https://code.google.com/p/chromium/issues/detail?id=269340)

javascript – 彩虹文字的循环动画

解决方法

相关文章