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

これには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 に答える
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.5秒はアニメーションの長さです。ミリ秒単位で設定することもできます。

使いやすさは、アニメーションの動作方法です。基本設定は次のとおりです。

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 に答える