[CSSチュートリアル】CSSもこんな風に遊べる？気まぐれグラデーションの極意

この前の記事で--。 1行のCSSコードがもたらす魔法 では、1行のCSSコードで生成できる素晴らしい（そしておそらく奇妙なほど適切な）背景を紹介しました。

今回は、引き続き背景に関する興味深い知識を紹介します。非常に小さな単位とわずか数行のコードを使って、素晴らしい、興味深い背景効果を生み出します。

背景グラフィックスにおけるオーダーの効果

本論文の主役は

• 複数の放射状グラデーション（リピーティング・ラジアル・グラデーション）
• 繰り返しコニックグラデーション

背景グラフィックへのオーダーは？こんな面白い現象があるので見てみましょう。

を使用しています。 repeating-conic-gradient 複数の角度のあるグラデーションを持つグラフィックを実装するコードは非常にシンプルで、以下のように図示されています。

<div></div>
div {
    width: 100vw;
    height: 100vh;
    background: repeating-conic-gradient(#fff, #000, #fff 30deg);
}

画像

遺言 30deg 交換 {コード

次に、上記のコードを、非常に小さな値の 0.1deg というように見える。

30deg

これは一体何なのでしょうか？このコードの行で描かれたグラフィックがどのようなものか想像してみてください。

その効果をご覧ください。

すごい、信じられない。ここで { background: repeating-conic-gradient(#fff, #000, #fff 0.1deg); } ここで角度が小さい（1deg以下が良い）ほど、背景のグラフィックにオーダがあるということで、よりクールなグラフィックになります。

CodePen -- 1行のCSSパターン

CSSの@propertyで変更過程を観察する

以前は、次のような遷移コードを直接書いても、補間された遷移アニメーションは得られず、フレーム単位のアニメーションしか得られなかった。

0.1deg

このような効果しか得られないのは、CSS がこのような複雑なグラデーションに対する直接的な遷移アニメーションをサポートしていないからです: 。

さて、次は、この記事で応用編--。 不可能を可能にするCSSの@property によって紹介されました。 div{ background: repeating-conic-gradient(#fff, #000, #fff 0.1deg); transition: background 1s; } div:hover { background: repeating-conic-gradient(#fff, #000, #fff 30deg); } の知識があれば CSS @property を使えば、その2つの状態がどのように変化するかを見ることができます。

単純に変形させると、コアとなるコードは以下のようになります。

CSS @property

画像

なんと、このグラフに異なるオーダーの効果を求めるという精神で、不思議な感じのトランジションアニメーションが出来上がりました。ぜひ、DEMOをクリックして、その効果を確かめてみてください。

CodePen -- repeat-conic-gradient CSS Pattern Transition (Chrome85+のみ)

で @property --angle { syntax: '<angle>'; inherits: false; initial-value: 0.1deg; } div{ background: repeating-conic-gradient(#fff, #000, #fff var(--angle)); transition: --angle 2s; } html:hover { --angle: 30deg; } から見た、補間されたトランジションアニメーション。 CSS @property から {コード 小さな単位での変化を大まかに見ることができます。 {コード は、グラフにどのように影響を与えるかです。

また、この単位が小さいほど、細かいところまで写っているので、細かいところは自分でもう一度試してみてください。

小さな単位で複数の放射状グラデーション＆複数の角度グラデーションで面白い背景ができる

上記のヒントをもとに、繰り返しラジアルグラデーションと繰り返しコニックグラデーションを使うと、非常に面白い背景を作り出すことができます。

そのいくつかを簡単に列挙すると

{{コード
{コード

画像

30deg

画像

0.1deg

画像

0.1deg

画像

ねえ、楽しみの多くはありませんが、より興味深いグラフィックは、自分自身を試してみることができ、フルデモのコードは、あなたが見るためにここに突き刺すことができます。

CodePenデモ -- 魔法のグラデーションアート

最小値はどこまで小さくできる？

div { background-image: repeating-radial-gradient( circle at center center, rgb(241, 43, 239), rgb(239, 246, 244) 3px ); } と似ています。 div { background-image: repeating-radial-gradient( circle at 15% 30%, rgb(4, 4, 0), rgb(52, 72, 197), rgb(115, 252, 224), rgb(116, 71, 5), rgb(223, 46, 169), rgb(0, 160, 56), rgb(234, 255, 0) 2px ); } と同じ引数を取りますが、そのコンテナ全体を覆うように四方八方に色が繰り返されます。

次のコードを例にとると、グラフの1つの描画の終端点である

div {
    background-image: repeating-radial-gradient(
        circle at center center,
        rgb(81, 9, 72),
        rgb(72, 90, 223),
        rgb(80, 0, 34),
        rgb(34, 134, 255),
        rgb(65, 217, 176),
        rgb(241, 15, 15),
        rgb(148, 213, 118) 0.1px
    );
}

の比較として8つのグラフが描かれた。

で div { background-image: repeating-radial-gradient( ellipse at center center, rgb(75, 154, 242), rgb(64, 135, 228), rgb(54, 117, 214), rgb(43, 98, 200), rgb(33, 79, 185), rgb(22, 60, 171), rgb(12, 42, 157), rgb(1, 23, 143) 0.01px ); } から {コード この間、グラフィックは基本的にパーティクルグラフィックになり、放射状のグラデーションのアウトラインは見えなくなっています。 repeating-radial-gradient このレベルになると、ベタ塗りの画像に退化するのです

CodePenデモ -- 繰り返し放射状グラデーションのグラフィックスにおける長さの単位のレベルの違いによる効果

繰り返し放射状グラデーションを用いたテレビの雪の結晶のノイズアニメーション

上記のDEMOでは、「1」の時に radial-gradient() から 1px この間隔を {コード 基本的にパーティクルグラフィックスに縮退しています。

{{コード

画像

テレビの雪見だいふくの効果に近いのでは？ 細田 :root { --length: 1px } { background-image: repeating-radial-gradient( circle at 17% 32%, rgb(4, 4, 0), rgb(52, 72, 197), rgb(115, 252, 224), rgb(116, 71, 5), rgb(223, 46, 169), rgb(0, 160, 56), rgb(234, 255, 0) var(--length) ); } パラメータで、いくつかの異なるフレームを使用すると、テレビの雪の結晶のノイズのアニメーションが得られます。

画像

ソースコードの全文はこちらでご覧になれます。

Copepenデモ -- PURE CSS TV NOISE EFFECT (Chrome85+のみ)

最後

数行の背景コードで何ができるのか？もっといろいろあるはずですが、もちろん、それがCSSの面白さです。最も面白いCSSの情報を得るには、私のiCSS公開ページ - iCSS Front End Newsをお見逃しなく!

さて、今回の記事はここまでです。お役に立ちましたか？

その他の素晴らしいCSSの技術的な記事は、私の Github -- iCSS 星をクリックすると、コレクションを購読することができます。

CSSに関するこの記事はここまでです。気まぐれグラデーションの記事はこちらで紹介しています、より関連するCSSグラデーションコンテンツはスクリプトホームの過去記事を検索するか、以下の関連記事を引き続き閲覧してください、今後もよりスクリプトホームを応援していただけると嬉しいです