CSS `gradient` 深度：`conic-gradient`, `repeating-linear-gradient` 与 `color-stop`

各位观众老爷，大家好！今天咱们来聊聊CSS渐变的那些事儿，保证让你们听完之后，感觉自己也能画出彩虹！ 这次我们重点攻克三个知识点：conic-gradient（锥形渐变）、repeating-linear-gradient（重复线性渐变），以及color-stop（颜色停止点）。这三个家伙，一个比一个有意思，学好了能让你的网页瞬间变得高级起来。

一、conic-gradient：画个馅饼图，so easy!

咱们先从conic-gradient开始。这玩意儿，顾名思义，就是像锥子一样，从一个中心点放射出去的渐变。最常见的应用场景就是画馅饼图（饼状图）。

• 基本语法:

  background: conic-gradient(angle, color-stop1, color-stop2, ...);

  • angle：渐变的起始角度，默认是0deg，也就是从正上方开始。可以设置为45deg、90deg等等。
  • color-stop：颜色停止点，定义了渐变颜色和位置。

• 简单示例：

  <div class="pie"></div>
  
  <style>
  .pie {
    width: 200px;
    height: 200px;
    border-radius: 50%; /* 让它变成圆形 */
    background: conic-gradient(red, blue);
  }
  </style>

  这段代码会画出一个从红色到蓝色的圆形渐变。 看起来有点像一个被咬了一口的苹果。

• 进阶示例：制作一个简单的饼状图

  <div class="pie"></div>
  
  <style>
  .pie {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: conic-gradient(
      red 25%,
      blue 25% 50%,
      green 50% 75%,
      yellow 75% 100%
    );
  }
  </style>

  这个例子就有点意思了。我们定义了四个颜色停止点，分别是：

  • red 25%：红色，从0%到25%的位置。
  • blue 25% 50%：蓝色，从25%到50%的位置。
  • green 50% 75%：绿色，从50%到75%的位置。
  • yellow 75% 100%：黄色，从75%到100%的位置。

  每个颜色占据了饼状图的四分之一。

• 控制中心点位置：

  默认情况下，conic-gradient的中心点在元素的正中心。我们可以使用from关键字来改变起始角度，使用at关键字来改变中心点位置。

  background: conic-gradient(from 45deg at 20% 60%, red, blue);

  • from 45deg：从45度角开始渐变。
  • at 20% 60%：中心点在元素宽度的20%和高度的60%的位置。

  把这些参数玩溜了，想画啥样的馅饼图都行。

• conic-gradient的优势：

  • 绘制饼状图更方便: 相比于其他方法，conic-gradient绘制饼状图代码更简洁，易于维护。
  • 灵活性高: 可以自由控制起始角度和中心点位置，满足各种需求。
  • 性能较好: 浏览器对conic-gradient的渲染性能优化得不错。

二、repeating-linear-gradient：重复的条纹，才是艺术！

接下来咱们说说repeating-linear-gradient。这个家伙可以在元素上重复绘制线性渐变，做出各种条纹效果。

• 基本语法：

  background: repeating-linear-gradient(angle, color-stop1, color-stop2, ...);

  • angle：渐变的方向角度，和linear-gradient一样。
  • color-stop：颜色停止点，定义了渐变颜色和位置。

• 简单示例：

  <div class="stripes"></div>
  
  <style>
  .stripes {
    width: 200px;
    height: 200px;
    background: repeating-linear-gradient(
      45deg,
      red 0px,
      red 20px,
      blue 20px,
      blue 40px
    );
  }
  </style>

  这段代码会画出45度倾斜的红蓝条纹。

  • red 0px, red 20px：从0px到20px的位置都是红色。
  • blue 20px, blue 40px：从20px到40px的位置都是蓝色。

  然后，这个红蓝条纹会重复绘制，直到填满整个元素。

• 进阶示例：制作一个更复杂的条纹效果

  <div class="stripes"></div>
  
  <style>
  .stripes {
    width: 200px;
    height: 200px;
    background: repeating-linear-gradient(
      to right,
      rgba(255, 0, 0, 0.5) 0px,
      rgba(255, 0, 0, 0.5) 10px,
      rgba(0, 0, 255, 0.5) 10px,
      rgba(0, 0, 255, 0.5) 20px
    );
  }
  </style>

  这个例子使用了半透明的红色和蓝色，并且使用了to right关键字来指定渐变方向。 通过调整rgba的透明度可以产生很多意想不到的效果。

• 控制条纹宽度：

  通过调整颜色停止点的位置，可以控制条纹的宽度。

  background: repeating-linear-gradient(
    90deg,
    black 0px,
    black 5px,
    white 5px,
    white 10px
  );

  这段代码会画出黑白相间的条纹，每个条纹的宽度是5px。

• repeating-linear-gradient的优势：

  • 绘制条纹效果更简单: 相比于使用多个元素来模拟条纹，repeating-linear-gradient代码更简洁。
  • 可定制性强: 可以自由控制条纹的颜色、宽度、角度等等。
  • 动态效果: 配合CSS动画，可以实现动态的条纹效果。 比如跑马灯。

三、color-stop：颜色的指挥家

color-stop是渐变中非常重要的概念，它定义了渐变颜色和位置。 没有color-stop，渐变就无从谈起。

• 基本语法：

  color position

  • color：颜色值，可以是任何有效的CSS颜色值，比如red、#ff0000、rgba(255, 0, 0, 0.5)等等。
  • position：位置，可以是百分比或者长度值。表示颜色在渐变线上的位置。

• 示例：

  background: linear-gradient(red 20%, blue 80%);

  • red 20%：红色，在渐变线的20%的位置。
  • blue 80%：蓝色，在渐变线的80%的位置。

  这意味着，从0%到20%的位置是红色，从80%到100%的位置是蓝色，中间是红色到蓝色的渐变过渡。

• 多个color-stop：

  可以定义多个color-stop来创建更复杂的渐变效果。

  background: linear-gradient(red 0%, green 50%, blue 100%);

  • red 0%：红色，在渐变线的0%的位置。
  • green 50%：绿色，在渐变线的50%的位置。
  • blue 100%：蓝色，在渐变线的100%的位置。

  这样就创建了一个从红色到绿色再到蓝色的渐变。

• 省略position：

  如果省略position，浏览器会自动计算颜色停止点的位置。

  background: linear-gradient(red, green, blue);

  在这种情况下，浏览器会将红色、绿色和蓝色均匀分布在渐变线上。 也就是红色在0%，绿色在50%，蓝色在100%。

• color-stop的妙用：

  • 创建硬边渐变：

    通过让两个相邻的color-stop的位置相同，可以创建硬边渐变。

    background: linear-gradient(red 50%, blue 50%);

    这样就会在渐变线的50%的位置出现一个明显的颜色分界线，而不是平滑的过渡。

  • 模拟阴影：

    可以使用多个颜色相近的color-stop来模拟阴影效果。

    background: linear-gradient(
      to right,
      rgba(0, 0, 0, 0.2) 0%,
      rgba(0, 0, 0, 0) 100%
    );

    这段代码会创建一个从左到右的阴影效果。

  • 制作图案：

    结合repeating-linear-gradient，可以利用color-stop制作各种复杂的图案。

    background: repeating-linear-gradient(
      45deg,
      transparent 0px,
      transparent 10px,
      rgba(0, 0, 0, 0.1) 10px,
      rgba(0, 0, 0, 0.1) 20px
    );

    这段代码会创建一个斜条纹的图案。

四、实战演练：做一个炫酷的加载动画

现在，咱们来一个实战演练，把上面学到的知识都用起来，做一个炫酷的加载动画。

<div class="loader"></div>

<style>
.loader {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: conic-gradient(
    from 45deg,
    red 0%,
    red 70%,
    white 70%,
    white 100%
  );
  animation: rotate 1s linear infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>

这段代码会创建一个旋转的红色扇形加载动画。

• conic-gradient： 创建一个从红色到白色的扇形渐变，红色占据70%，白色占据30%。
• animation： 使用CSS动画让这个扇形旋转起来。

五、总结：

今天我们学习了conic-gradient、repeating-linear-gradient和color-stop。 这三个家伙是CSS渐变的利器，掌握了它们，就可以轻松创建各种炫酷的效果。

特性	描述	应用场景
conic-gradient	从中心点放射状渐变，类似锥形。	饼状图、雷达图、仪表盘等。
repeating-linear-gradient	重复线性渐变，创建条纹效果。	条纹背景、斑马线、动态效果等。
color-stop	颜色停止点，定义渐变颜色和位置。	控制渐变颜色、创建硬边渐变、模拟阴影、制作图案等。

希望大家多多练习，熟练掌握这些技巧，让你的网页更加精彩！ 如果大家有什么问题，欢迎在评论区留言，我们一起讨论。 下次再见！