3

テキストのスパンがあり、クリックすると背景色を変更して強調表示されます。誰かが実際にテキストをハイライトしているように、背景色が左から右に徐々に変化するように、ハイライトをアニメーション化したいと思います。CSS3やJavascript/jQueryでそれをどのように達成できるかについて何か考えはありますか？

4

2 に答える 2

7

CSS3 のみの機能に問題がない場合は、トランジション、グラデーション、および を使用できますbackground-size。

.highlightable {
    background-size: 0 100%;
    background-repeat: no-repeat;
    -webkit-transition: background-size 0.5s ease-out;
    -moz-transition: background-size 0.5s ease-out;
    -ms-transition: background-size 0.5s ease-out;
    -o-transition: background-size 0.5s ease-out;
    transition: background-size 0.5s ease-out;
}

.highlightable.highlight {
    background-image: -webkit-linear-gradient(yellow, yellow);
    background-image: -moz-linear-gradient(yellow, yellow);
    background-image: -ms-linear-gradient(yellow, yellow);
    background-image: -o-linear-gradient(yellow, yellow);
    background-image: linear-gradient(yellow, yellow);
    background-size: 100% 100%;
}​

これがデモです。

于 2012-04-20T23:08:21.123 に答える
0

多くの JavaScript ライブラリを使用すると、これを非常に簡単に行うことができます。たとえば、私のお気に入りはYUIです。

それ以外の場合は、ライブラリがなければ、各タイム スライスで背景に使用する 16 進数の中間色値を含む配列を設定します。メソッドを使用しsetTimeout()て背景色を数回すばやく連続して変更します。例えば

setTimeout("document.getElementById('mySpan').style.backgroundColor = myColors[i]; i++;", 50);
于 2012-04-20T22:55:28.247 に答える