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


Posted in HTML / CSS onApril 27, 2021

在之前的这篇文章 -- 一行 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);
}

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 还能这样玩?奇思妙想渐变的艺术

嘿嘿,是不是别有一番意思,更多有意思的图形可以自己尝试尝试,完整的 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)
    );
}

我从 100px0.00001px 绘制了 8 张图形,作为比较:

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

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

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

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

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

在上述 DEMO 中,我们发现,当在 0.001px0.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 还能这样玩?奇思妙想渐变的艺术

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

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

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

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

最后

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

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

更多精彩 CSS 技术文章汇总在我的 Github -- iCSS ,持续更新,欢迎点个 star 订阅收藏。

到此这篇关于CSS 还能这样玩?奇思妙想渐变的艺术的文章就介绍到这了,更多相关css渐变内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
CSS3按钮鼠标悬浮实现光圈效果源码
Sep 11 HTML / CSS
HTML5离线缓存在tomcat下部署可实现图片flash等离线浏览
Dec 13 HTML / CSS
HTML5之HTML元素扩展(下)—增强的Form表单元素值得关注
Jan 31 HTML / CSS
使用HTML5 Canvas为图片填充颜色和纹理的教程
Mar 21 HTML / CSS
Html5中localStorage存储JSON数据并读取JSON数据的实现方法
Feb 13 HTML / CSS
HTML5新特性之语义化标签
Oct 31 HTML / CSS
浅析HTML5中的download属性使用
Mar 13 HTML / CSS
前端实现打印图像功能
Aug 27 HTML / CSS
html5自动播放mov格式视频的实例代码
Jan 14 HTML / CSS
Bootstrap File Input文件上传组件
Dec 01 HTML / CSS
如何通过 CSS 写出火焰效果
Mar 24 HTML / CSS
详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)
Jul 01 HTML / CSS
css3 实现文字闪烁效果的三种方式示例代码
Css预编语言及区别详解
用position:sticky完美解决小程序吸顶问题的实现方法
Apr 24 #HTML / CSS
position:sticky 粘性定位的几种巧妙应用详解
六种css3实现的边框过渡效果
Apr 22 #HTML / CSS
HTML+CSS+JS实现图片的瀑布流布局的示例代码
巧用 -webkit-box-reflect 倒影实现各类动效(小结)
You might like
让Nginx支持ThinkPHP的URL重写和PATHINFO的方法分享
2011/08/08 PHP
PHP函数spl_autoload_register()用法和__autoload()介绍
2012/02/04 PHP
PHP类中的魔术方法(Magic Method)简明总结
2014/07/08 PHP
基于Laravel-admin 后台的自定义页面用法详解
2019/09/30 PHP
jQuery 性能优化手册 推荐
2010/02/23 Javascript
jquery提取元素里的纯文本不包含span等里的内容
2013/09/30 Javascript
jQuery元素的隐藏与显示实例
2015/01/20 Javascript
node.js操作mongodb学习小结
2015/04/25 Javascript
AngularJs bootstrap搭载前台框架——js控制部分
2016/09/01 Javascript
bootstrap学习使用(导航条、下拉菜单、轮播、栅格布局等)
2016/12/01 Javascript
JavaScript设计模式之代理模式详解
2017/06/09 Javascript
Javascript 严格模式use strict详解
2017/09/16 Javascript
详解React+Koa实现服务端渲染(SSR)
2018/05/23 Javascript
JavaScript实现京东购物放大镜和选项卡效果的方法分析
2018/07/05 Javascript
Vue实现点击箭头上下移动效果
2020/06/11 Javascript
[41:08]2014 DOTA2国际邀请赛中国区预选赛 HGT VS NE
2014/05/22 DOTA
带你了解python装饰器
2017/06/15 Python
python 限制函数调用次数的实例讲解
2018/04/21 Python
Python3 JSON编码解码方法详解
2019/09/06 Python
Django和Flask框架优缺点对比
2019/10/24 Python
浅谈django不使用restframework自定义接口与使用的区别
2020/07/15 Python
怎么解决pycharm license Acti的方法
2020/10/28 Python
编译 pycaffe时报错:fatal error: numpy/arrayobject.h没有那个文件或目录
2020/11/29 Python
python切片作为占位符使用实例讲解
2021/02/17 Python
哪些情况下不应该使用索引
2015/07/20 面试题
大学应届毕业生个人求职信
2013/09/23 职场文书
自荐书格式
2013/12/01 职场文书
上课迟到检讨书100字
2014/01/11 职场文书
数学检讨书1000字
2014/02/24 职场文书
副乡长群众路线教育实践活动个人对照检查材料
2014/09/19 职场文书
住房抵押登记委托书
2014/09/27 职场文书
幼儿园见习报告
2014/10/30 职场文书
2016秋季田径运动会广播稿
2015/12/21 职场文书
自荐信范文
2019/05/20 职场文书
oracle DGMGRL ORA-16603报错的解决方法(DG Broker)
2021/04/06 Oracle
使用Cargo工具高效创建Rust项目
2022/08/14 Javascript