当前位置：首页 > article >正文

使用css3锥形渐变conic-gradient实现有趣样式

article 2025/2/11 8:09:26

在之前的篇幅中介绍过css的线性渐变linear-gradient()和径向渐变radial-gradient()，如果你对这两种渐变还不了解的话，可以看一下之前录制的视频教程。

往期文档地址：https://blog.csdn.net/qq_18798149/article/details/134389038
视频学习地址： https://www.bilibili.com/video/BV1ga4y1D78d

名词介绍：

这一节再介绍另一种渐变方法，conic-gradient()锥形渐变，所谓锥形渐变：它围绕一个中心点旋转，颜色沿着圆周方向变化，上个图可能看起来更直观。

在这里插入图片描述

用法说明：

使用一段css可以简单实现上面的这种效果，如下所示：

html部分

<div class="conic"></div>

css部分

.conic{
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background-image: conic-gradient(red,yellow,green,cyan,blue,magenta,red);    
}

只需要为背景background设置conic-gradient方法，在函数内设置想要锥形渐变的颜色，即可达到如下图所示效果。

在这里插入图片描述

按照如上所示的方法，可以做一些金属质感的纹理效果，如下图所示，只需要找好颜色，这种类型的效果很好实现，为了更好的调整锥形渐变的角度和范围，是可以为锥形渐变设置角度和范围的，上面的渐变同时还可以添加角度设置范围。

background-image: conic-gradient(red 0deg,yellow 60deg,green 120deg,cyan 180deg,blue 240deg,magenta 300deg,red 360deg);

在这里插入图片描述

这种效果实在是缺少美感，没什么太多的应用，下面我就结合在项目中常见的效果来应用一下conic-gradient锥形渐变，希望能通过下面更多属性的介绍，为大家添加更多的技能，操作这类效果更方便。

☀️应用一：放射线效果

在这里插入图片描述

这种效果见过没，很多的促销海报会用到这种背景，为海报增加视觉吸引力和空间感，相信大家见过这样的设计吧，放几张海报大家感受一下。

在这里插入图片描述

大家可以从海报中找到锥形放射线的位置吧，跑远了，怎么讲到设计上去了，我们来给大家贴一下代码怎么实现吧。

.radiation{
    width: 300px;
    height: 300px;
    margin:100px;
    background-image: conic-gradient(
        #3772FF 0 10deg,
        transparent 10deg 20deg,
        #3772FF 10deg 30deg, 
        transparent 30deg 40deg,
        .....
        );          
}

如果0度和10度直接的颜色不同，会出现渐变混合的，放射线的边缘是比较清晰的，所以看上面代码就可以看出规律来了，给0度到10度设置第一个颜色，给10度到20度设置第二个颜色，给20度到30度设置第一个颜色，然后递增10度的方式依次设置，直到360度，这样会实现放射线的效果，但是会出现非常庞大的代码，其实css3给我们提供了另一个非常好用的方法。

repeating-conic-gradient()

可以来重复交替，就不需要我们手动去添加了，如下代码所示：

background: repeating-conic-gradient(
    #3772FF 0deg 10deg,
    transparent 10deg 20deg
);

通过这个重复方法就可以按照我们给定的两个或者更多颜色，按照我们的规律自动进行重复填满，省去我们自己计算的时间。

📀应用二：loading加载样式

在这里插入图片描述

如上这种loading渐变圆环转圈圈的效果，大家在一些网站都见过吧，原来想实现这种方法，你可能还需要使用图片，现在使用css的锥形渐变配合mask遮罩属性，然后添加animation即可实现此类效果，下面就来介绍一下。

1.HTML创建节点，css画一个锥形渐变

<div class="loading"></div>

.loading{
    width: 200px;
    height: 200px;            
    border-radius: 50%;
    background: conic-gradient(transparent 0deg, transparent 60deg, #337EEF 360deg);    
}

设置一个锥形渐变，从0度-60度是透明色，60-360度自定义颜色，会获得如下图形效果。
在这里插入图片描述

2.用mask遮罩属性，将中心区域隐藏

mask遮罩，可以使用位图、矢量图，同时也支持使用渐变函数来进行遮罩，详细的mask遮罩文档可以查看下面链接：https://developer.mozilla.org/zh-CN/docs/Web/CSS/mask

.loading{
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: conic-gradient(transparent 0deg, transparent 60deg, #337EEF 360deg);
    mask:radial-gradient(transparent calc(50% - 1px), #000 50%);   
    -webkit-mask:radial-gradient(transparent calc(50% - 1px), #000 50%);
}

看上面代码，添加了mask属性，值是已经镜像渐变，这个径向渐变是一个从中心透明到黑色的圆环，效果可以放到background属性看看，如下图所示：

在这里插入图片描述

如果将这个渐变遮罩背景的锥形渐变，将会透明透明位置隐藏，不透明位置显示，两层一叠加，就会得到一个锥形渐变的圆环效果了，添加-webkit-mask是为了做低版本浏览器兼容的，这样不但浏览器支持，微信小程序也支持此mask遮罩效果，如下图所示：

在这里插入图片描述

3.keyframes定义关键帧，animation动起来

.loading{
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: conic-gradient(transparent 0deg, transparent 60deg, #337EEF 360deg);
    mask:radial-gradient(transparent calc(50% - 1px), #000 50%);       
    -webkit-mask:radial-gradient(transparent calc(50% - 1px), #000 50%);
    animation: rotate 0.6s linear infinite;
}

@keyframes rotate{
    100%{
        transform: rotate(360deg);
    }
}

在这里插入图片描述

这样一个loading加载动画就做出来了，如果loading样式太大，你只需要设置width宽和height高即可缩小loading样式了。

应用三🔲：透明棋盘网格效果

在这里插入图片描述

上面这种效果大家见过没有，如果是一张png透明图，超出图片本身的区域会有黑白相间的透明网格作为背景，在我开发的咸虾米壁纸后台管理项目中，也用到了这种效果，超出规定区域的背景将使用黑白透明网格作为填充。https://www.bilibili.com/cheese/play/ss145273324

在这里插入图片描述

这个用途比较多，来看一下怎么实现的吧。

<div class="box">
    <img src="./img.png" width="200">
</div>

.box{
    width: 300px;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: conic-gradient(#ccc 0 25%,#fff 25% 50%,#ccc 50% 75%,#fff 75%);
    background-size: 16px 16px;    
}