jquery - CSS3グラデーションバックグラウンドスピンの作成

Question

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

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

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

score 3 · Accepted Answer

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

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

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

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

1 に答える 1