共计 3355 个字符,预计需要花费 9 分钟才能阅读完成。
在之前的这篇文章 — 一行 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);
}
将 30deg
替换为 0.1deg
而后,咱们用一个十分小的值去替换上述代码中的 30deg
,相似于这样:
{background: repeating-conic-gradient(#fff, #000, #fff 0.1deg);
}
这是什么玩意?脑补一下,这行代码绘制进去的图形会是什么样子?
看看成果:
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 不反对对这种简单的突变进行间接的过渡动画:
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,本着寻找不同数量级单位对这个图形的影响,却歪打正着失去了一个看着很魔幻的过渡动画成果。强烈建议你点进 DEMO 感触下变换的成果:
CodePen — repeating-conic-gradient CSS Pattern Transition(Only Chrome 85+)
通过 CSS @property
实现的补间过渡动画,看到从 30deg
到 0.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
);
}
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
);
}
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
);
}
嘿嘿,是不是别有一番意思,更多有意思的图形能够本人尝试尝试,残缺的 DEMO 代码,你能够戳进这里看看:
CodePen Demo — Magic Gradient Art
最小能够小到什么水平?
repeating-radial-gradient
它相似于 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)
);
}
我从 100px
到 0.00001px
绘制了 8 张图形,作为比拟:
在 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+)
最初
几行背景代码能干什么?必定不止这些,当然,这不就是 CSS 的乐趣么。想 Get 到最有意思的 CSS 资讯,千万不要错过我的 iCSS 公众号 😄
好了,本文到此结束,心愿对你有帮忙 :)
更多精彩 CSS 技术文章汇总在我的 Github — iCSS,继续更新,欢送点个 star 订阅珍藏。
如果还有什么疑难或者倡议,能够多多交换,原创文章,文笔无限,满腹经纶,文中若有不正之处,万望告知。