純粋な CSS で素晴らしく興味深い背景効果を実現します。！-CSSチュートリアル-php.cn

純粋な CSS で素晴らしく興味深い背景効果を実現します。！

青灯夜游

リリース： 2021-04-30 09:03:26

転載

2636 人が閲覧しました

純粋な CSS で素晴らしく興味深い背景効果を実現します。！

この記事では、興味深い背景知識を紹介します。いくつかの非常に小さなユニットとわずか数行のコードを使用すると、素晴らしく興味深い結果を生み出すことができます。背景効果~

背景グラフィックスに対する大きさの影響

この記事の主な内容は次のとおりです:

複数の放射状グラデーション (繰り返し-放射状 -グラデーション)
複数の角度勾配 (円錐勾配の繰り返し)

背景グラフィックの の大きさは何桁ですか ?このような興味深い現象を見てみましょう:

私たちは repeat-conic-gradient を使用して、複数の角度のグラデーションを持つグラフィックを実装します。コードは以下に示すように非常に単純です:

<div></div>

ログイン後にコピー

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

ログイン後にコピー

純粋な CSS で素晴らしく興味深い背景効果を実現します。！

`30deg` を `0.1deg`

に置き換えます。次に、非常に小さな値を使用して上記のコードを置き換えます。 30deg、これに似ています:

{
    background: repeating-conic-gradient(#fff, #000, #fff 0.1deg);
}

ログイン後にコピー

これは何ですか?考えてみてください。このコード行によって描画されるグラフィックはどのように見えるでしょうか?

その効果を見てください:

純粋な CSS で素晴らしく興味深い背景効果を実現します。！

すごいですね。ここで 0.1deg は非常に重要です。ここでの角度が小さいほど (できれば 1deg 未満)、グラフィックスはよりクールになります。これを、背景グラフィックスに対する桁違いの影響と呼びます。

CodePen -- 1 行の 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 がこのような複雑な直接トランジションアニメーションをサポートしていないためです。グラデーション ：

純粋な CSS で素晴らしく興味深い背景効果を実現します。！

OK、次にこの記事で使用します -- CSS @property、不可能を可能にするはじめにCSS @property の知識があれば、CSS @property を使用して 2 つのステータス変更のプロセスを観察できます。

コードの簡単な変換、コアコードは次のとおりです。

@property --angle {
  syntax: &#39;<angle>&#39;;
  inherits: false;
  initial-value: 0.1deg;
}
div{
    background: repeating-conic-gradient(#fff, #000, #fff var(--angle));
    transition: --angle 2s;
}
html:hover {
    --angle: 30deg;
}

ログイン後にコピー

純粋な CSS で素晴らしく興味深い背景効果を実現します。！

すごい、桁違いの単位の影響を見つけるにはこのグラフでは、ランダムなグラフを取得しました。魔法のようなトランジションアニメーション効果のように見えます。デモをクリックして変換の効果を体験することを強くお勧めします:

CodePen -- 反復円錐勾配 CSS パターン遷移 (Chrome 85 のみ)

Passed CSS @property によりトゥイーン遷移アニメーションが実現します 30deg から 0.1deg への変化過程を見ると、大まかに小さな単位 0.1 度がグラフィックスに与える影響。

同時に、ユニットが小さいほど、画像の詳細がより多くなります。自分で試してみることができます。

興味深い背景を実現するための小さな単位の複数の放射状グラデーションと複数の角度グラデーション

上記のヒントの一部を使用して、複数の放射状グラデーション (繰り返し-放射状-グラデーション) を使用します。 ) と複数の角度勾配 (繰り返し円錐勾配) を使用すると、非常に興味深い背景画像を生成できます。

いくつか挙げてみましょう:

div {
    background-image: repeating-radial-gradient(
        circle at center center,
        rgb(241, 43, 239),
        rgb(239, 246, 244) 3px
    );
}

ログイン後にコピー

純粋な CSS で素晴らしく興味深い背景効果を実現します。！

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
    );
}

ログイン後にコピー

純粋な CSS で素晴らしく興味深い背景効果を実現します。！

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
    );
}

ログイン後にコピー

純粋な CSS で素晴らしく興味深い背景効果を実現します。！

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
    );
}

ログイン後にコピー

純粋な CSS で素晴らしく興味深い背景効果を実現します。！

ねえ、面白くないですか? もっと興味深いグラフィックスを自分で試してみてください。完全なデモコードについては、ここをクリックして参照できます:

CodePen デモ -- Magicグラデーションアート

どこまで小さくできますか?

repeat-radial-gradient これは radial-gradient() に似ており、同じ引数を受け取りますが、色を全方向に繰り返し、それをオーバーライドします。コンテナ全体。

次のコードを例に挙げます。グラフィックの 1 つの描画の終了点は 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)
    );
}

ログイン後にコピー

比較のために、100px から 0.00001px までの 8 つのグラフィックを描きました:

9-純粋な CSS で素晴らしく興味深い背景効果を実現します。！

在 0.001px 到 0.0001px 这个区间段，基本上图形已经退化为粒子图形，见不到径向渐变的轮廓了，而到了 0.00001px 这个级别，居然退化为了一张纯色图片！

CodePen Demo -- 不同级别长度单位对 repeating-radial-gradient 图形的影响

使用 repeating-radial-gradient 实现电视雪花噪声动画

在上述 DEMO 中，我们发现，当在 0.001px 到 0.0001px 这个区间段，repeating-radial-gradient 基本退化为了粒子图形：

{
    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) 0.0008px
    );
}

ログイン後にコピー

純粋な CSS で素晴らしく興味深い背景効果を実現します。！