3

アイテムにCSS3背景グラデーションを設定しましたが、ゆっくり回転させたいと思います。私はCSS3とHTML5を始めたばかりです(CSSとHTMLを15年間使用していますが、新しいものがたくさんあります)。実際の要素ではなく、背景だけを回転させることは可能ですか?

(ページへのリンクは存在しないため、削除されました)テキストの前景にあるにもかかわらず、背景のグラデーションです。背景クリップが大好きです)。テキストを回転させたくありませんが、背景を回転させたいのです。また、これはWebkitブラウザーでのみ機能します。

HTML5キャンバス、CSS3変換、Javascript / jQueryなどのスクリプトを使用するつもりです(ただし、純粋なCSS3を維持するのは素晴らしいことです)。ただし、画像の使用は避けようとしています。

4

1 に答える 1

3

これを行うには、CSSプロパティをJavaScriptでアニメーション化します。CSSの変更を容易にするためにjQueryを少し使用する例を次に示します。

デモ: http: //jsfiddle.net/HYDAj/2/

基本的にはsetInterval100msごとにグラデーション角度を変えるのに使っています。特定のグラデーションを機能させることができませんでした。この例はWebKitブラウザーでのみ機能しますが、それで開始できます。

また、「background-clip:text」をサポートしているのはWebKitだけなので、これがFirefoxやIEで機能しないもう1つの理由です。

jQueryを使用する必要がない場合は、純粋なJavaScriptの方法を次に示します。

http://jsfiddle.net/HYDAj/3/

于 2012-04-20T21:58:40.103 に答える