Du CSS pur pour obtenir des effets d'arrière-plan merveilleux et intéressants ! !

Cet article vous présentera des connaissances de base intéressantes. En utilisant de très petites unités et seulement quelques lignes de code, vous pouvez produire des résultats merveilleux et intéressants ~

L'impact des ordres de grandeur sur les graphiques d'arrière-plan

Les principaux protagonistes de cet article sont :

• Les dégradés radiaux multiples (répétition-radial-gradient )
• Dégradé angulaire multiple (gradient conique répétitif)

Quel est l'ordre de grandeur par rapport au graphique d'arrière-plan  ? Jetons un coup d'œil à un phénomène aussi intéressant :

Nous utilisons repeating-conic-gradient plusieurs dégradés angulaires pour implémenter un graphique. Le code est très simple, comme indiqué ci-dessous :

<div></div>

<. 🎜>

par 30deg0.1deg

dans le code ci-dessus par une très petite valeur, similaire à celle-ci : 30deg

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

est très critique. Plus l'angle ici est petit (de préférence inférieur à 1deg), plus les graphiques seront froids, ce que nous appelons l'impact de l'ordre de grandeur sur les graphiques d'arrière-plan. 0.1deg

CodePen -- One Line CSS Pattern

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

CSS ne prend pas en charge l'animation de transition directe pour un tel complexe dégradés ：

CSS @property pour rendre l'impossible possibleIntroduit connaissances , nous pouvons utiliser CSS @property pour observer le processus de leurs deux changements d'état. 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);
}

CodePen -- Repeating-conic-gradient CSS Pattern Transition (Uniquement Chrome 85+)

et en voyant le processus de changement de CSS @property à 30deg, nous pouvons voir à peu près comment la petite unité 0.1deg affecte les graphiques. 0.1deg

Plusieurs dégradés radiaux et plusieurs dégradés angulaires avec de petites unités pour obtenir des arrière-plans intéressants

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

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

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

Démo CodePen -- Magic. Art du dégradé

Il est similaire à repeating-radial-gradient et prend les mêmes paramètres, mais il répète la couleur dans toutes les directions, couvrant tout son contenant. radial-gradient()

est au centre de cet article. 1px

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

à 100px pour comparaison : 0.00001px

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

这不是非常类似电视雪花屏的效果么？微调 0.0008px 这个参数， 利用几帧不同的动画，我们就可以得到电视雪花噪声的动画了。

啊哈，非常的有意思，完整的源码你可以戳这里：

Copepen Demo -- PURE CSS TV NOISE EFFECT (Only Chrome 85+)

更多编程相关知识，请访问：编程视频！！

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!