首页 > 网页制作  > 前端开发

CSS 还能这样玩?奇思妙想渐变的艺术

admin 前端开发 2021-04-26 16:44:25  
后台-系统设置-扩展变量-手机广告位-内容正文底部

在之前的这篇文章 -- 一行 CSS 代码的魅力 中,我们介绍了一种使用一行 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);
}

将%2030deg%20替换为%200.1deg

然后,我们用一个非常小的值去替换上述代码中的%2030deg,类似于这样:

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

这是什么玩意?脑补一下,这行代码绘制出来的图形会是什么样子?

看看效果:

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

CodePen%20--%20One%20Line%20CSS%20Pattern

借助%20CSS%20@property%20观察变化过程

在之前,如果我们直接写下述的过渡代码,是无法得到补间过渡动画的,只会有逐帧动画:

div{
%20%20%20%20background:%20repeating-conic-gradient(#fff,%20#000,%20#fff%200.1deg);
%20%20%20%20transition:%20background%201s;
}

div:hover%20{
%20%20%20%20background:%20repeating-conic-gradient(#fff,%20#000,%20#fff%2030deg);
}

只能得到这样的效果,原因在于%20CSS%20不支持对这种复杂的渐变进行直接的过渡动画:

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

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

CodePen%20--%20repeating-conic-gradient%20CSS%20Pattern%20Transition(Only%20Chrome%2085+)

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

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

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

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

简单罗列一些:

div%20{
%20%20%20%20background-image:%20repeating-radial-gradient(
%20%20%20%20%20%20%20%20circle%20at%20center%20center,
%20%20%20%20%20%20%20%20rgb(241,%2043,%20239),
%20%20%20%20%20%20%20%20rgb(239,%20246,%20244)%203px
%20%20%20%20);
}

div%20{
%20%20%20%20background-image:%20repeating-radial-gradient(
%20%20%20%20%20%20%20%20circle%20at%2015%%2030%,
%20%20%20%20%20%20%20%20rgb(4,%204,%200),
%20%20%20%20%20%20%20%20rgb(52,%2072,%20197),
%20%20%20%20%20%20%20%20rgb(115,%20252,%20224),
%20%20%20%20%20%20%20%20rgb(116,%2071,%205),
%20%20%20%20%20%20%20%20rgb(223,%2046,%20169),
%20%20%20%20%20%20%20%20rgb(0,%20160,%2056),
%20%20%20%20%20%20%20%20rgb(234,%20255,%200)%202px
%20%20%20%20);
}

div%20{
%20%20%20%20background-image:%20repeating-radial-gradient(
%20%20%20%20%20%20%20%20circle%20at%20center%20center,
%20%20%20%20%20%20%20%20rgb(81,%209,%2072),
%20%20%20%20%20%20%20%20rgb(72,%2090,%20223),
%20%20%20%20%20%20%20%20rgb(80,%200,%2034),
%20%20%20%20%20%20%20%20rgb(34,%20134,%20255),
%20%20%20%20%20%20%20%20rgb(65,%20217,%20176),
%20%20%20%20%20%20%20%20rgb(241,%2015,%2015),
%20%20%20%20%20%20%20%20rgb(148,%20213,%20118)%200.1px
%20%20%20%20);
}

div%20{
%20%20%20%20background-image:%20repeating-radial-gradient(
%20%20%20%20%20%20%20%20ellipse%20at%20center%20center,
%20%20%20%20%20%20%20%20rgb(75,%20154,%20242),
%20%20%20%20%20%20%20%20rgb(64,%20135,%20228),
%20%20%20%20%20%20%20%20rgb(54,%20117,%20214),
%20%20%20%20%20%20%20%20rgb(43,%2098,%20200),
%20%20%20%20%20%20%20%20rgb(33,%2079,%20185),
%20%20%20%20%20%20%20%20rgb(22,%2060,%20171),
%20%20%20%20%20%20%20%20rgb(12,%2042,%20157),
%20%20%20%20%20%20%20%20rgb(1,%2023,%20143)%200.01px
%20%20%20%20);
}

嘿嘿,是不是别有一番意思,更多有意思的图形可以自己尝试尝试,完整的%20DEMO%20代码,你可以戳进这里看看:

CodePen%20Demo%20--%20Magic%20Gradient%20Art

最小可以小到什么程度?

repeating-radial-gradient%20它类似于%20radial-gradient()%20并且采用相同的参数,但是它会在所有方向上重复颜色,以覆盖其整个容器。

以下述代码为例子,其中的单次绘制图形的终止点%201px,也就是本文的重点,它究竟可以小到什么程度呢?

:root%20{
%20%20%20%20--length:%201px
}
{
%20%20%20%20background-image:%20repeating-radial-gradient(
%20%20%20%20%20%20%20%20circle%20at%2017%%2032%,
%20%20%20%20%20%20%20%20rgb(4,%204,%200),
%20%20%20%20%20%20%20%20rgb(52,%2072,%20197),
%20%20%20%20%20%20%20%20rgb(115,%20252,%20224),
%20%20%20%20%20%20%20%20rgb(116,%2071,%205),
%20%20%20%20%20%20%20%20rgb(223,%2046,%20169),
%20%20%20%20%20%20%20%20rgb(0,%20160,%2056),
%20%20%20%20%20%20%20%20rgb(234,%20255,%200)%20var(--length)
%20%20%20%20);
}

我从%20100px%20到%200.00001px%20绘制了%208%20张图形,作为比较:

在%200.001px%20到%200.0001px%20这个区间段,基本上图形已经退化为粒子图形,见不到径向渐变的轮廓了,而到了%200.00001px%20这个级别,居然退化为了一张纯色图片!

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

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

在上述%20DEMO%20中,我们发现,当在%200.001px%20到%200.0001px%20这个区间段,repeating-radial-gradient%20基本退化为了粒子图形:

{
%20%20%20%20background-image:%20repeating-radial-gradient(
%20%20%20%20%20%20%20%20circle%20at%2017%%2032%,
%20%20%20%20%20%20%20%20rgb(4,%204,%200),
%20%20%20%20%20%20%20%20rgb(52,%2072,%20197),
%20%20%20%20%20%20%20%20rgb(115,%20252,%20224),
%20%20%20%20%20%20%20%20rgb(116,%2071,%205),
%20%20%20%20%20%20%20%20rgb(223,%2046,%20169),
%20%20%20%20%20%20%20%20rgb(0,%20160,%2056),
%20%20%20%20%20%20%20%20rgb(234,%20255,%200)%200.0008px
%20%20%20%20);
}

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

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

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

最后

几行背景代码能干什么?肯定不止这些,当然,这不就是 CSS 的乐趣么。想 Get 到最有意思的 CSS 资讯,千万不要错过我的 iCSS 公众号 -- iCSS前端趣闻

好了,本文到此结束,希望对你有帮助

后台-系统设置-扩展变量-手机广告位-内容正文底部
版权声明

本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。
本文地址:https://jcdi.cn/wyzz/f1d9603da38d496bcb8cf89cfa306810.html

留言与评论(共有 0 条评论)
   
验证码:
后台-系统设置-扩展变量-手机广告位-评论底部广告位

教程弟

https://www.jcdi.cn/

统计代码 | 京ICP1234567-2号

Powered By 教程弟 教程弟

使用手机软件扫描微信二维码