CSS conic-gradient()锥形渐变原理解析

目录
文章目录隐藏
  1. 语法
  2. 锥形渐变的应用
  3. 重复圆锥渐变 repaeting-conic-gradient
  4. 兼容性

语法

conic-gradient( [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )

锥形渐变由 3 部分组成:

  • 起始角度
  • 中心位置
  • 角渐变断点

其中起始角度和中心位置都是可以省略的,因此,最简单的锥形渐变用法如下

.example {
    width: 300px; height: 150px;
    background-image: conic-gradient(white, deepskyblue);
}

效果如下图所示:

CSS conic-gradient()实现圆锥形渐变效果

上图具体渲染的细节我专门做了个图标注了下,方便大家学习,如下所示:

锥形渐变渲染原理简单示意

我们通过修改几个参数值,来验证上面原理示意图是否正确。例如改变下起始角度和中心位置,看看锥形渐变效果是怎样的,如下:

conic-gradient(from 45deg at 25% 25%, white, blue);

结果渐变起始角度改成 45 度,中心点位置移动到相对元素左上角 25%的位置,效果如下图所示。

45 度起始角度锥形渐变效果图

锥形渐变的颜色断点

锥形渐变的颜色断点数据类型是&lt;angular-color-stop-list&gt;,顾名思义是角颜色断点列表,有别于线性渐变和径向渐变的断点列表,使用的是角度值,而非长度值。

例如:

conic-gradient(white, blue 45deg, white);

deepskyblue 45deg这里使用的是'45deg'是个角度值,于是码云笔记,可以明显看到 2 点钟方向的颜色最深。

使用角度值设置断点效果截图

需要注意的是,角渐变断点中设置的角度值是一个相对角度值,最终渲染的角度值是和起始角度累加的值,例如:

conic-gradient(from 45deg, white, deepskyblue 45deg, white);

此时deepskyblue实际渲染的坐标角度是90deg(45deg + 45deg),效果如图下图所示,可以明显看到 3 点钟方向的颜色最深。

渐变断点角度值是相对值效果示意

有此可见,锥形渐变中颜色断点角度值和百分比值没有什么区别,两者可以互相转换,一个完整的旋转总共 360 度,因此,45deg 等同于 12.5%,因此,下面两段 CSS 效果是一模一样的:

/* 下面两段语句效果一样 */
conic-gradient(white, blue 45deg, white);
conic-gradient(white, blue 12.5%, white);

如果是渐变转换点,角度值和百分比值也是也互相转换的,例如下面的两条语句都是合法的:

/* 合法 */
conic-gradient(white, 12.5%, blue);
/* 合法 */
conic-gradient(white, 45deg, blue);

效果如下图所示,把渐变中间颜色移动到了 12.5%的位置(原来是在 50%位置处),因此渐变的后半部分颜色就比较深。

渐变转换点移动到 12.5%位置处的效果截图

锥形渐变的应用

锥形渐变可以非常方便地实现饼图效果,例如:

.pie {
    width: 150px; height: 150px;
    border-radius: 50%;
    background: conic-gradient(yellowgreen 40%, gold 0deg 75%, blue 0deg);   
}

效果如下:

锥形渐变实现饼图效果

其中,代码部分的'gold 0deg 75%'这里就是渐变范围语法(IE 浏览器不支持),这是这里一个使用了角度值,一个是百分比值,这里0deg换成0%也是一样的效果,并不是必须使用角度值。

然后,理论上,这里设置的数值应该是40%,或者144deg,而不是0deg,不过渐变断点有个特性,如果后面的渐变断点位置值比前面的渐变断点位置值小的时候,后面的渐变断点的位置值会按照前面较大的渐变断点位置值渲染。

于是乎,'gold 0deg 75%'这里的'0deg'就会使用'yellowgreen 40%'中的'40%'位置值进行渲染,同理,'deepskyblue 0deg'实际是按照'deepskyblue 75%'渲染的。

也就是说,如果我们想要渐变颜色界限分明,只要设置起始渐变位置为 0%就可以了,无需动脑子去计算,算是一个 CSS 实用小技巧。

我们还可以使用锥形渐变实现的基于色相和饱和度的取色盘,CSS 代码如下:

.hs-wheel {
    width: 150px; height: 150px;
    border-radius: 50%;
    background: radial-gradient(closest-side, gray, transparent),
        conic-gradient(red, magenta, blue, aqua, lime, yellow, red);
}

效果如下图所示:

锥形渐变实现的基于色相和饱和度的取色盘

锥形渐变是所有 CSS 方法中,实现棋盘效果(PNG 透明背景的灰白网格效果)最简单的方法,一行 CSS 代码就足够了:

.checkerboard {
    width: 300px; height: 160px;
    background: conic-gradient(#eee 25%, white 0deg 50%, #eee 0deg 75%, white 0deg) 0 / 20px 20px;
}

实时效果如下

PNG 透明背景的灰白网格效果

再来一个例子,演示如何借助锥形渐变实现很实用的 loading 效果,代码如下:

.loading {
    width: 100px; height: 100px;
    border-radius: 50%;
    background: conic-gradient(deepskyblue, 30%, white);
    --mask: radial-gradient(closest-side, transparent 75%, black 76%);
    -webkit-mask-image: var(--mask);
    mask-image: var(--mask);
    animation: spin 1s linear infinite reverse;
}
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

效果如下显示:

锥形渐变实现很实用的 loading 效果

原理很简单,Loading 图像其实就是一个锥形渐变,只是使用了 CSS 遮罩属性只让外圈 25%的范围显示,于是 loading 的圆环效果就出现了。

如果想要小尺寸的 loading 效果,直接修改上述 CSS 代码中的width属性值和height属性值即可。

重复圆锥渐变 repaeting-conic-gradient

与线性渐变及径向渐变一样,圆锥渐变也是存在重复圆锥渐变 repaet-conic-gradient 的。

我们假设希望不断重复的片段是 0~30° 的一个片段,它的 CSS 代码是 :

conic-gradient(deeppink 0 15deg, yellowgreen 0 30deg)

效果如下图所示:

重复圆锥渐变

然后,使用了 repaeting-conic-gradient 之后,会自动填充满整个区域,CSS 代码如下:

.repeatgraid{
   width: 200px;
   height: 200px;
   background: repeating-conic-gradient(deeppink 0 15deg, yellowgreen 0 30deg);
   border: 1px solid #000;
}

看一下效果:

重复圆锥渐变

兼容性

说到这儿肯定有小伙伴想问了,这么流弊的属性,兼容性如何呢?锥形渐变是 CSS Images Module Level 4 规范中新定义的一种渐变,所以兼容性要比线性渐变和径向渐变差很多,目前 Chrome 和 Safari 浏览器均已支持,Firefox 即将正式支持。

conic-gradient 兼容性

那么到底能不能在我们的项目中使用呢?个人建议如果是对内的中后台产品可以使用,但是对外的项目中使用还存在较大风险,还是需要使用图片替代。

以上就是今天码云笔记为大家整理的 CSS conic-gradient()锥形渐变原理解析得全部能容,喜欢可以分享出去哦!

原文链接《CSS conic-gradient()锥形渐变简介

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » CSS conic-gradient()锥形渐变原理解析

发表回复