彩虹色文本的循环动画-Java 学习之路

CYCLING COLORS ON HOVER With JavaScript/jQuery

我正在尝试取一段文本，根据HSL 0deg和360deg之间的计算位置为每个字母着色，然后将颜色悬停在右边的颜色上 . 我知道这很奇怪，但请耐心等待 . What I want is animated rainbow text on hover.

我已经涵盖了让所有这一切都发生一次的逻辑，但不能让悬停骑行行为发挥作用 .

here is a link to the codepen.io: http://cdpn.io/txmlf

我尝试过使用JavaScript鼠标事件和jQuery的.hover（） . 我最初的想法是设置鼠标输入的间隔，并在退出时清除它 .

在这个非常重要的项目上，我真的很感激 .

2 回答

17
您可能想要考虑这会如何影响用户体验，但是如何：http://jsfiddle.net/7Xuep/6/

好的，所以使用CSS动画很容易旋转彩虹的所有颜色 . 然后问题是将它们链接到所有span标记，以便动画在正确的位置开始 . （即你需要绿色字母从绿色等开始它的动画 . ）为此，我们可以使用 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/

（可以在这里跟踪铬中的错误：https://code.google.com/p/chromium/issues/detail?id=269340）
回复于 2024-05-03T07:06:03+08:00

为什么不保持简单，（仅使用您的HTML） this is all you need:

Live demo

var step = 4, // colorChage step, use negative value to change direction
    ms   = 10,  // loop every
    $uni = $('.unicorn'),
    txt  = $uni.text(),
    len  = txt.length,
    lev  = 360/len,
    newCont = "",
    itv;
alert(lev+' '+len);

for(var i=0; i<len; i++)newCont += "<span style='color:hsla("+ i*lev +", 100%, 50%, 1)'>"+ txt.charAt(i) +"</span>";

$uni.html(newCont); // Replace with new content
var $ch = $uni.find('span'); // character

function stop(){ clearInterval(itv); }
function anim(){
  itv = setInterval(function(){
    $ch.each(function(){
      var h = +$(this).attr('style').split(',')[0].split('(')[1]-step % 360;
      $(this).attr({style:"color:hsla("+ h +", 100%, 50%, 1)"});
    });
  }, ms); 
}

$uni.hover(anim,stop);

经过FF，Chrome，Opera测试

回复于 2024-05-03T07:06:03+08:00

彩虹色文本的循环动画

2 回答

相关问题