2

仅使用 css3 就可以获得动画颜色吗？

这是关于我想获得演示效果的演示。
该演示使用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;
    });
});​
4

2 回答 2

1

当然，你可以做到。您为背景设置了 :hover 颜色，并且不要忘记将过渡 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是动画的持续时间。也可以以毫秒为单位进行设置。

轻松是动画的行为方式。基本设置是：

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/

于 2012-11-24T10:39:09.310 回答
1

您可以为此使用 css3 转换。这是一个简单的例子 -演示

我的示例中的代码：

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;
}

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

于 2012-11-24T10:36:23.927 回答