css探索渐变-实现饼图-加载图-灯柱
css渐变分为三种：线性渐变：linear-gradient()圆形渐变：radial-gradient()圆锥渐变：conic-gradient()一起来讨论这三种渐变分别为：linear-gradient()linear-gradient()函数用于创建表示两种或多种颜色的线性渐变的图片。是一种特殊的数据类型。基本语法：linear-gradient(angle,color);背景：线性渐变（45deg，红色，金色，绿色，蓝色）；默认渐变100%，渐变颜色等分100%。如果只有两种颜色，则各占50%。可以通过设置颜色背景的断点来改变颜色的比例：linear-gradient(45deg,red,gold10%,green90%,blue);以上语法：角度45°，比例（断点）：0-10%为红色，10%-90%为黄绿色渐变（平分），90%-100%为蓝色渐变，断点为渐变可以是负值或者大于100%通过断点来控制颜色的比例，如果想看清楚颜色的分界线只需要调整比例接近即可，如：background:linear-渐变（45deg，红色50%，金色50%）；这里明确的分界线是因为前一个颜色通过后，紧接下一个颜色连接到结果。如果这样写，那么中间的50%~70%就是上一个颜色到下一个颜色的过渡色。这里注意一下，如果是全拟合断点，可能会出现锯齿。解决方法是加一个1px的颜色过渡来解决背景：linear-gradient(45deg,red50%,goldcalc(50%+1px));注意：css渐变本质上是一种特殊的数据类型，所以不能用transitions来实现过渡效果，也不能用animations来实现动画效果。radial-gradient()圆形渐变radial-gradient()其实和上面的linear-gradient()是一样的，只要你熟悉linear-gradient()的语法，再总结一些不同点,基本相同。radial-gradient()是圆形渐变，渐变的效果是从第一种颜色开始，颜色向外扩散。/*第一个参数是半径，后面是颜色*/background:radial-gradient(50px,green,gold);如果渐变不设置断点，颜色的比例是相等的。注意：当半径的值为百分比时，必须有两个参数，当值为px时，可以为一个参数。圆形渐变涉及半径大小和圆点的位置。语法如下：radial-gradient(x轴y轴的半径大小，颜色1，颜色2);背景：径向渐变（40px在20px50%，红色20%，蓝色70%，绿色）；上例：半径为40px，x轴为20px，y轴移动50%，颜色为红蓝绿渐变。实现按钮点击颜色覆盖效果通过radial-gradient()，可以实现按钮点击圆形展开的动画效果扩展按钮
.editBtn2{width:100px;高度：40px；文本对齐：居中；行高：40px；边界半径：6px；颜色：#fff；背景：#4d90feradial-gradient(closest-sidecircleat50%50%,#80c34250%,rgba(128,195,66,0)52%)no-repeatcenter/0%0%;过渡：背景大小0.2s；/*通过transition实现values的转换，动画时间为0.2s*/&:active{background-size:600%600%;/*改变xy轴的大小为600%*/}}径向渐变参数说明：closest-side：端部的边缘形状与容器最靠近渐变中心点的那一侧相切（圆形）circle:circle(200px200px这里不能用，因为不能用px语法定义渐变末端的形状，必须用circle的关键字语法。另外，渐变末端的形状默认为当前元素的形状，如果要定义其他形状，必须使用最近边约束)at50%50%：元素中心的径向渐变点第一种颜色：绿色，占50%第二种颜色：绿色完全透明，占52%到100%，2%抗锯齿达到平滑效果no-repeat：不平铺。center：居中/尺寸和xy轴分别为0%。Transition用于实现值的转换。动画时间为0.2s。点击时，触发active，背景在0.2s内放大600%，实现过渡效果。有些人可能对closest-side这个属性感到困惑，closest-side是用来定义渐变结束的形状|属性|说明||---|---||最近边|与最靠近中心点的边（圆）相切，或者至少与最靠近渐变中心点（椭圆）的垂直和水平边相切。||最近的角落|渐变结束的边缘形状与最接近渐变中心点的容器角相交。||最远边|与closest-side相反，边缘形状与距离渐变中心点最远的容器一侧（或最远的垂直和水平边）相切。||最远的角落|渐变结束的边缘形状与距离渐变中心点最远的容器角相交。|radial-gradient()文档：https://developer.mozilla.org/zh-CN/docs/Web/CSS/gradient/radial-gradientconic-gradient()锥形渐变锥形渐变是渐变围绕A的颜色变换中心点旋转（而不是从中心辐射）conic-gradient()文档：https://developer.mozilla.org/zh-CN/docs/Web/CSS/gradient/conic-gradientbackground:conic-gradient(red,橙色、黄色、绿色、蓝色）；锥形渐变可以定义圆点的角度和位置，如下：background:conic-gradient(from0degat50px20px,blue,cyan,gold,red);定义角度时，需要在前面加一个from如：fromxxxdeg，at之后是x轴和y轴的位置。对锥形渐变色背景做更细致的划分：conic-gradient(from0deg,blue10%,cyan11%,cyan50%,gold51%,gold90%,red91%);角度0，从蓝色开始，红色结束，蓝色0%~10%，11%~50%为青色，51%~90%为黄色，红色91%~100%渐变渐变实现饼图.pancake{width:100像素；高度：100px；边界半径：50%；background:conic-gradient(from0deg,#4d90fe24%,#80c3420deg65%,#e942420deg);}角度0，中心点（默认），蓝色比例0%~24%，绿色占24%~65%，红色占65%~100%锥形渐变实现加载动画首先画一个锥形渐变，在渐变上加白色遮罩遮挡中心部分，形成加载动画静态效果可以旋转屏幕。loadConic{宽度：80px;高度：80px；边距：20px；背景：圆锥梯度（从0deg,#2d52a4,rgba(199,216,240,0)）；位置：相对；边界半径：50%；动画：spinLoad1s无限线性；&::之前{内容：'';宽度：80%；高度：80%；位置：绝对；顶部：50%；左：50%；转换：翻译（-50%，-50%）；边界半径：50%；背景：#fff；}@keyframesspinLoad{来自{transform:rotate(0deg);}到{变换：旋转（360deg）；}}}美发店灯柱渐变实现repeating-linear-gradient()重复渐变，先画一个灯柱和灯体超出灯体的部分，给灯体加上动画，向上移动
