纯CSS实现美妙而有意思的背景效果!!

文章2022-05-1469 人已阅来源:网络

纯CSS实现美妙而有意思的背景效果!!

本篇文章给大家介绍一下背景的一些有意思的知识,利用一些极小的单位,只需要短短几行代码,就能够产生出美妙而又有意思的背景效果~

数量级对背景图形的影响

本文的主角主要是:

  • 多重径向渐变(repeating-radial-gradient)
  • 多重角向渐变(repeating-conic-gradient)

什么是数量级对背景图形呢?我们来看这样一种有意思的现象:

我们使用 repeating-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实现美妙而有意思的背景效果!!

Wow,不可思议。这里 0.1deg 非常关键,这里的角度越小(小于 1deg 为佳),图形越酷炫,也就是我们说的数量级对背景图形的影响。

CodePen -- One Line CSS Pattern

借助 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 观察一下它们两种状态变化的过程。

简单改造下代码,核心代码如下:

@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实现美妙而有意思的背景效果!!

Wow,本着寻找不同数量级单位对这个图形的影响,却歪打正着得到了一个看着很魔幻的过渡动画效果。强烈建议你点进 DEMO 感受下变换的效果:

CodePen -- repeating-conic-gradient CSS Pattern Transition(Only Chrome 85+)

通过 CSS @property 实现的补间过渡动画,看到从 30deg0.1deg 的变化过程,我们大致可以看出小单位 0.1deg 是如何去影响图形的。

同时,这个单位越小,图片的细节越多,具体的可以自己再尝试。

多重径向渐变 & 多重角向渐变 配合小单位实现有意思的背景

利用上述的一些小技巧,我们利用多重径向渐变(repeating-radial-gradient)、多重角向渐变(repeating-conic-gradient)就可以生成一些非常有意思的背景图片。

简单罗列一些:

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实现美妙而有意思的背景效果!!

嘿嘿,是不是别有一番意思!