动画颜色更改过渡

时间:2010-11-04 18:15:19

标签: html css animation colors hover

无论何时使用css或其他任何东西我们都会改变颜色,如背景,颜色,边框颜色等。有没有办法可以设置正常和悬停状态颜色之间的过渡动​​画?

我想说的是颜色,让我们说从白色到黑色瞬间变化。我希望过渡阶段像白色和黑色之间的所有灰度。对于颜色,如果一种颜色逐渐淡入另一种颜色,则可以通过淡化效果实现。颜色介于两者之间。

有没有办法实现这个目标?

4 个答案:

答案 0 :(得分:2)

这可以用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
        });

答案 1 :(得分:1)

听起来像是jQuery的工作 - 特别是对于animate()方法:

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

答案 2 :(得分:1)

有可能吗?是

怎么可能?的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

答案 3 :(得分:0)

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

但是你可以这样做:让元素A被设计为反映非悬停状态,并且让元素B被设置为反映悬停状态,除了将不透明度设置为0.然后绝对将元素B直接放在元素上A.然后使用jQuery fadeIn()和fadeOut()方法在悬停时更改元素B的不透明度。