css的突变分为三种：
线性突变：linear-gradient()
圆形突变：radial-gradient()
锥形突变：conic-gradient()
上面就这三种突变别离讨论一下：
linear-gradient()线性突变
linear-gradient() 函数用于创立一个示意两种或多种色彩线性突变的图片。是一种特地的<image>数据类型。
根底语法：linear-gradient(角度，色彩);
background: linear-gradient(45deg,red,gold,green,blue);
默认突变占比100%，突变色彩平分100%占比，如果只有两种色彩，就占比各为50%。
能够通过设置色彩的断点，更改色彩占比
background: linear-gradient(45deg,red,gold 10%,green 90%,blue);下面的语法：角度45°，占比（断点）：0-10%是红色，10%-90%为黄绿突变（占比平分），90%-100%为蓝色突变，突变的断店能够是正数也能够大于100%
通过断点管制色彩的占比，如果想要清晰的看到色彩的分割线，只须要将占比调到贴近即可，如：
background: linear-gradient(45deg,red 50%,gold 50%);
这里的清晰分割线是因为上一个色彩过了后立马连接下一个色彩所出现的后果，如果是这么写的
那么两头50% ~ 70%的就是从上个色彩到下个色彩的过渡色。
这里有一个留神点，如果是齐全贴合的断点可能会呈现锯齿
解决办法是增加1px的色彩过渡即可解决
background: linear-gradient(45deg,red 50%,gold calc(50% + 1px));须要留神：css突变实质上是一种特地的<image>数据类型，因而无奈应用transition实现过渡成果，也无奈应用animation实现动画成果
radial-gradient()圆形突变
radial-gradient()其实和下面的linear-gradient()是一样的，只有相熟了linear-gradient()的语法，再总结一些区别基本上就差不多了。
radial-gradient() 为圆形突变，突变的成果为从第一个色彩开始，色彩向外扩散。
/*第一个参数半径大小，前面的为色彩*/ background: radial-gradient(50px,green,gold);
突变如果不设置断点，色彩的占比就是均等的。
须要留神：半径大小的值为百分比时必须是两个参数，值为px时能够是一个参数。圆形突变波及到半径大小和圆点地位，语法如下：radial-gradient(半径大小 at x轴 y轴 ,色彩1,色彩2);
background: radial-gradient(40px at 20px 50% ,red 20%,blue 70% , green);
下面案例：半径40px，x轴20px，y轴挪动50%，色彩为红、蓝、绿突变。
实现按钮点击的色彩笼罩成果
通过radial-gradient() 能够实现按钮点击圆形扩大的动画成果
<div class="editBtn2">扩大按钮</div>.editBtn2{ width: 100px; height: 40px; text-align: center; line-height: 40px; border-radius: 6px; color: #fff; background: #4d90fe radial-gradient(closest-side circle at 50% 50% , #80c342 50%, rgba(128, 195, 66,0) 52%) no-repeat center / 0% 0%; transition: background-size 0.2s; /* 通过transition实现数值的过渡，动画工夫0.2s */ &:active{ background-size : 600% 600%; /* 更改xy轴大小为600% */ }}径向突变参数阐明：closest-side：完结的边缘形态与容器间隔突变中心点最近的一边相切（圆形）circle： 圆形 (这里不能应用200px 200px，因为定义突变完结的形态不能应用px语法，得用circle这种关键字语法，另外，突变完结的形态默认就是以后元素的形态，如果要定义其余形态必须应用closest-side束缚)at 50% 50%: 径向突变的圆点在元素核心第一个色彩：绿色，占比50%第二个色彩：绿色 齐全通明，占比52% 到 100% ，2%抗锯齿实现平滑成果no-repeat：不平铺center: 居中 /大小xy轴别离是0%
下面利用transition实现数值的过渡，动画工夫0.2s，点击的时候触发active，背景的在0.2s内放大600%实现过渡成果。
可能有人对closest-side这个属性很含糊，closest-side是用来定义突变完结的形态
| 属性 | 阐明 |
| --- | --- |
| closest-side | 突变完结的边缘形态与容器间隔突变中心点最近的一边相切（圆形）或者至多与间隔突变中心点最近的垂直和程度边相切（椭圆）。 |
| closest-corner | 突变完结的边缘形态与容器间隔突变中心点最近的一个角相交。 |
| farthest-side | 与 closest-side 相同，边缘形态与容器间隔突变中心点最远的一边相切（或最远的垂直和程度边）。 |
| farthest-corner | 突变完结的边缘形态与容器间隔突变中心点最远的一个角相交。 |
radial-gradient()文档：https://developer.mozilla.org/zh-CN/docs/Web/CSS/gradient/radial-gradient
conic-gradient() 锥形突变
锥形突变也就是突变的色彩变换围绕一个中心点旋转（而不是从核心辐射）
conic-gradient()文档：https://developer.mozilla.org/zh-CN/docs/Web/CSS/gradient/conic-gradient
background: conic-gradient(red, orange, yellow, green, blue);锥形突变能够定义角度和圆点地位，如下：
background: conic-gradient(from 0deg at 50px 20px , blue,cyan,gold, red);
定义角度时，后面须要带from如：from xxxdeg，at后为x轴和y轴的地位。
对锥形突变色调做更粗疏的划分
background: conic-gradient(from 0deg, blue 10%,cyan 11%,cyan 50%,gold 51%, gold 90%, red 91%);角度0，从蓝色开始，红色结尾，蓝色0% ~ 10%，11% ~ 50%为青色，51% ~ 90%为黄色，红色91% ~ 100%
锥形突变实现饼图
.pancake{ width: 100px; height: 100px; border-radius: 50%; background: conic-gradient(from 0deg, #4d90fe 24% , #80c342 0deg 65% , #e94242 0deg);}
角度0，核心圆点（默认），蓝色占比0% ~ 24%，绿色占比24% ~ 65%，红色占比65% ~ 100%
锥形突变实现加载动画
先绘制一个锥形突变
在突变上增加红色的蒙版，挡住核心的局部，造成加载动画的动态成果
让画面旋转起来即可
.loadConic{ width: 80px; height: 80px; margin: 20px; background: conic-gradient(from 0deg ,#2d52a4 , rgba(199, 216, 240,0)); position: relative; border-radius: 50%; animation: spinLoad 1s infinite linear; &::before{ content: ''; width: 80%; height: 80%; position: absolute; top:50%; left: 50%; transform: translate(-50%,-50%); border-radius: 50%; background: #fff; } @keyframes spinLoad { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }}突变实现发廊灯柱
repeating-linear-gradient()为反复突变
先绘制一个灯柱和灯体
灯体超出的局部暗藏，灯体增加动画，向上挪动
<div class="repetition"> <div class="pillar"></div></div>.repetition{ width: 50px; height: 200px; border: 1px solid #454545; position: relative; margin: 50px; border-radius: 2px; overflow: hidden; box-shadow: 1px 1px 0px 1px #ccc; .pillar{ width: 50px; height: 300px; position: absolute; background: repeating-linear-gradient(45deg,#4d90fe 0 6px , #fff 6px 14px); animation: spin 2s infinite linear; } @keyframes spin { from { top : 0px; } to { top : -100px } }}案例源码：https://gitee.com/wang_fan_w/css-diary
如果感觉这篇文章对你有帮忙，欢送点赞、珍藏、转发哦~