代码之家 › 专栏 › 技术社区 › Moon

动画颜色更改过渡

hover colors animation css html

Moon · 技术社区 · 15 年前

每当使用CSS或任何东西时,我们都会更改颜色,如背景、颜色、边框颜色等。有没有一种方法可以使正常和悬停状态颜色之间的转换产生动画效果?

我想说的是颜色,让我们说,立即从白色变为黑色。我想要过渡阶段,就像所有的灰度,在白色和黑色之间。使用颜色时,如果一种颜色逐渐淡入另一种颜色,则可以通过淡入效果实现此效果。中间的颜色被盖住了。

有没有办法做到这一点?

4 回复 | 直到 15 年前

Dave 15 年前

听起来像是jquery的一个作业,特别是对于animate()方法:

http://api.jquery.com/animate/

Daryl 15 年前

这可以通过CSS3来实现,尽管到目前为止还没有完全跨浏览器。 http://www.the-art-of-web.com/css/css-animation/

a { 
    -webkit-transition: all 1s ease-in-out; // control the animation time via '1s'
    -moz-transition: all 1s ease-in-out; 
    -o-transition: all 1s ease-in-out; 
    color:#ff0000;
}

a:hover { color:#00ff00 }

或者可以使用jquery.animate(); http://api.jquery.com/animate/

        $("#yourdiv").css({
            backgroundColor: #000000 // Original Background color
        }).hover(function() {
            $(this).stop().animate({
                backgroundColor: #ff0000 // Hover State Background color
            }, 350); // animation time
        }, function() {
            $(this).stop().animate({
                backgroundColor: #000000 // Hover out ( back to original )
            }, 350); // animation time
        });

zzzzBov 15 年前

有可能吗?对

怎么可能?javascript

X3maverick有一个很好的答案(不支持投票,对不起),但您也可以尝试制作一个计时器来相应地调整颜色。

var interval = 500,
  iteration = 0,
  maxIterations = 10;

setTimeout(doUpdate, interval);

function doUpdate()
{
  //color logic here 'rgb( R, G, B)' or #GHIJKL
  switch (interval)
  {
    case 0:
    ...
  }
  if (iteration < maxIterations) setTimeout(doUpdate, interval);
}

这将允许您精确地指定所需的颜色和顺序。请只使用你的力量为好或为可怕。闪烁的颜色和闪烁的文字会导致癫痫发作,不被欣赏。

jquery现在有一个官方的彩色动画插件:
http://docs.jquery.com/Release:jQuery_1.2/Effects#Color_Animations

Brian D'Astous 15 年前

您不能使用jquery直接设置颜色动画,因为“color”不是一个数字css属性。

但是您可以这样做:让元素a被设置为反映非悬停状态,让元素b被设置为反映悬停状态,除非不透明度设置为0。然后将元素B直接放置在元素A上,然后使用jquery fadein()和fadeout()方法更改悬停时元素B的不透明度。