Question

只需使用css3？

就可以获得动画颜色

以下是我希望获得demo效果的演示该演示使用jquery.color.js。

$(document).ready(function() {
    $('.replace-bg-on-hover').hover(

    function() {
        $(this).animate({
            backgroundColor: "#333"
        }, 500);
        return false;
    }, function() {
        $(this).animate({
            backgroundColor: "#6CA2FF"
        }, 500);
        return false;
    });
});

Answer 1

您可以使用css3过渡。这是一个简单的例子 - demo

我的例子中的代码：

HTML

<div class="box"></div>

CSS

.box {
    width: 100px;
    height: 100px;
    background: #005ca1;
    -webkit-transition: all 0.7s ease-out;
       -moz-transition: all 0.7s ease-out;
        -ms-transition: all 0.7s ease-out;
         -o-transition: all 0.7s ease-out;
            transition: all 0.7s ease-out;
}

.box:hover {
    background: #000;
}

编辑：添加了其余的前缀。

Answer 2

当然，你可以做到。你为背景设置了一个：悬停颜色，你不要忘记将过渡css属性添加到元素：

CSS代码：

.myElementToHover{
    background: #c00;
    transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease
}

.myElementToHover:hover{
    background: #00c;
}

一般来说，当你想使用CSS3规则时，Paul Irish（jquery）创建了一个非常有用的页面：http://css3please.com/只需使用它，所有答案都在这里！（除了你现在应该添加-ms-前缀）。

使用此代码，您可以为每个css属性添加转换，但如果您只想为backgroundColor添加转换，则将'all'替换为'backgroundColor'。

0.5s是动画的持续时间。它也可以用ms设置。

easy是动画的表现方式。基本设置为：

linear
ease (default)
ease-in
ease-out
ease-in-out

但您可以设置自己的转换：

cubic-bezier(0.215, 0.610, 0.355, 1.000)

Matthew Lein做了一个非常好的页面来帮助您进行自定义缓动设置：http://matthewlein.com/ceaser/

使用css3动画颜色

2 个答案: