CSS渐变

使用 CSS 创建渐变已经有一段时间了，但我认为很多人只是连接两种颜色。或者也许您只是用生成器复制并粘贴它？

事实上，通过将值设置得更细，您可以获得更丰富的表达，而不仅仅是渐变。如果你想一想，你可以只使用 CSS 来表达这样的东西。

使用手动 CSS 实现应用程序示例的后半部分很困难，因此我使用 SCSS 编写它。使用SCSS可以让您顺利地执行单独使用CSS难以完成的处理，并且使用mixin功能很方便，因为它省去了您输入数据的麻烦。

CSS 渐变类型

由于 CSS 渐变处理颜色，background-color因此很容易使用属性，但background-image它们是值。此外，根据渐变的形状，有以下六个值。

linear-gradient()：线性渐变
repeating-linear-gradient()：重复线性渐变
radial-gradient()：径向渐变
repeating-radial-gradient()：重复径向渐变
conic-gradient()：扇形渐变
repeating-conic-gradient()：重复扇形渐变

其中，除了之外，conic-gradient()所有这些都repeating-conic-gradient()可以与现代浏览器一起使用。截至 2020 年 2 月，扇形渐变仅受 Google Chrome、Safari 和 Edge 79 或更高版本支持。

CSS渐变的基本编写方法

最简单的编写方法是指定两种颜色。

background-image: linear-gradient(#f4c14e, #d36950);

通过添加颜色，您可以使用该颜色创建渐变。

background-image: linear-gradient(#6fb8d9, #f4c14e, #d36950);

它从蓝色变为黄色，再变为橙色。这里的关键点是指定的颜色均匀分布并且变化是线性的（两种颜色之间距离的中点是两种颜色之间的中点）。

指定方向占比

您可以通过指定路径点来更改颜色分布。具体来说，在颜色后指定 % 或 px。

background-image: linear-gradient(#6fb8d9 50%, #f4c14e 80%, #d36950 90%);

如果按照上面的方式指定，0%〜50%从顶部开始的位置将为蓝色，80%该位置将为黄色，该位置90%〜100%将为橙色。

此外，由于您可以指定航路点的开始和结束位置，因此也可以实现带状渐变。

background-image: linear-gradient(#6fb8d9 0% 30%, #f4c14e 40% 70%, #d36950 80% 100%);

当这样指定时0%〜30%，40%〜70%,80%〜100%部分将用纯色填充，30%〜40%,70%〜80%部分将用渐变填充。如果应用此并消除渐变部分，将创建条纹图案。

background-image: linear-gradient(#6fb8d9 0% 30%, #f4c14e 30% 70%, #d36950 70% 100%);

以上是线性渐变和径向渐变通用的符号。从这里，我们将解释线性和径向渐变的单独符号。

线性梯度渐变

对于线性渐变，可以通过在开始时传递渐变方向（角度）来改变渐变的方向。

 background-image: linear-gradient(45deg, #f4c14e, #d36950);
 background-image: linear-gradient(to bottom, #f4c14e, #d36950);

45deg如果您指定，它将从左下角到右上角以 45 度角从黄色渐变到橙色。默认值为 180 度。除了指定频率外，to bottom to top to left to right还可以通过关键字（如字符）来指定。

径向渐变形状和起始位置

径向渐变允许您指定渐变的形状而不是角度。除非另有指定，否则渐变将是适合元素矩形的椭圆形。（添加Viaway点是为了更容易理解渐变的形状）

background-image: radial-gradient(#f4c14e 0% 40%, #d36950 60% 100%);

默认关键字值为ellipse。circle牢记关键词，使渐变形状成为完美的圆形。

background-image: radial-gradient(circle, #f4c14e 0% 40%, #d36950 60% 100%);

渐变的形状现在是一个完美的圆形。您还可以使用进一步的语法at x坐标 y坐标将其插入到 shape 关键字之后来指定起始位置。

background-image: radial-gradient(circle at 100px 200px, #f4c14e 0% 40%, #d36950 60% 100%);

改变起始位置后，圆圈变大并被切断。这是因为默认情况下，灰度变化的程度是根据距圆心最远的顶点确定的。在上面的示例中，矩形的右下顶点100%就是值。

100%有四个关键字指定这部分。您可以通过在形状后面插入该关键字来更改它。如果您使用在最近的边缘终止的关键字，closest-side它将如下所示：

background-image: radial-gradient(circle closest-side at 100px 200px, #f4c14e 0% 40%, #d36950 60% 100%)

可以使用以下四个关键字来指定结束。

closest-side：在最靠近中心的一侧结束（椭圆的垂直和水平侧）
closest-corner：将最靠近中心的顶点作为末端
farthest-side：将距离中心最远的边缘（椭圆形的垂直和水平边缘）作为末端
farthest-corner：将距离中心最远的顶点作为末端（默认值）

下图显示了每个关键字。

径向渐变的语法有点复杂，但看起来像这样：

background-image: radial-gradient(形状 末端的关键字at x坐标 y坐标，颜色的经由点);

重复梯度渐变

CSS 渐变还包括重复渐变。repeating-linear-gradient()就是repeating-radial-gradient()这样。参数与基本线性/径向渐变相同，但不同之处在于路点是通过无限重复来填充的。

background-image: repeating-linear-gradient(#f4c14e 0%, #d36950 50%);

在上面的示例中50%，仅指定了该点之前的路点，但在该点之后将重复并填充渐变。（从基本linear-gradient()情况50%开始，将全部为橙色）

repeating-radial-gradient()也是如此。如果我们重复之前所说的话

background-image: repeating-radial-gradient(circle closest-side at 100px 200px, #f4c14e, #d36950);

closest-side被指定，因此它将是直到最近左侧的渐变的一个周期。相同的渐变以同心圆形式展开。

您可以通过更改航路点的值来调整重复频率。您还可以使用开头介绍的纯色规范方法来创建条纹图案。

background-image: repeating-linear-gradient(45deg, #f4c14e 0%　10%,　transparent 10% 20%);

指定多个渐变

虽然它不是CSS渐变本身的设置，但background-image属性可以指定用逗号分隔的多个值。您还可以使用它来创建如下所示的模式。

background-image: radial-gradient(circle closest-side, white 0% 65%, transparent 65% 100%), repeating-linear-gradient(90deg, #f4c14e 0 4.8%, transparent 4.8% 9.6%);

使用函数曲线的 CSS 渐变

基于CSS渐变的这些特点，我们将进入高级版本。通过使用函数曲线更改路点，您可以创建定期变化的渐变。准确地说，gradient两种颜色之间的变化是线性的，因此曲线是由许多直线来近似的。

使用回旋曲线的透明渐变

粗略地说，回旋曲线是一条柔和地连接直线和曲线的曲线。由于其特性，它也用于高速公路立交环路。通过轻轻地从直线过渡到曲线，您不必进行突然的转向动作。如果将其应用于渐变，所需的颜色将平滑变化。

比如透明度从无色增加到黑色的时候，用正常的渐变，一直到最后看起来都是灰色的，感觉就像只是到最后才变成黑色。但是，如果使用回旋曲线，颜色会自然变为黑色。

上面的回旋梯度可以用 CSS 表示如下。

background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.595) 50%, rgba(0, 0, 0, 0.7225) 65%, rgba(0, 0, 0, 0.78625) 75.5%, rgba(0, 0, 0, 0.81855) 82.85%, rgba(0, 0, 0, 0.83385) 88%, rgba(0, 0, 0, 0.85)); }

0这次我们将改变透明度0.85，但是通过精细地设置值，您可以表达回旋曲线。

不过每次都写这么复杂的东西太痛苦了，所以我准备了一个sass mixin。

@mixin clothoid-linear-gradient(
  $angle: to bottom,
  $color-start: #000000,
  $color-end: #ffffff,
  $start-point: 0
) {
  background-image: linear-gradient(
    $angle,
    $color-start 0 $start-point * 100%,
    mix($color-end, $color-start, 70%) $start-point * 100% + (1 - $start-point) *
      50%,
    mix($color-end, $color-start, 85%) $start-point * 100% + (1 - $start-point) *
      65%,
    mix($color-end, $color-start, 92.5%) $start-point * 100% +
      (1 - $start-point) * 75.5%,
    mix($color-end, $color-start, 96.3%) $start-point * 100% +
      (1 - $start-point) * 82.85%,
    mix($color-end, $color-start, 98.1%) $start-point * 100% +
      (1 - $start-point) * 88%,
    $color-end
  );
}

使用它$color-start时$color-end您所要做的就是指定颜色。

@include mixin.clothoid-linear-gradient($color-start: rgba(0,0,0,0), $color-end: rgba(0,0,0,0.85));

使用三角函数的梯度

我们还将介绍使用三角函数的分级，这是高中数学的秘密。三角曲线，特别是正弦曲线，被称为波浪曲线。由于函数的特性，变化率在开始时逐渐变化，中间变得陡峭，然后在末尾变得更加平缓。既然是周期函数，那么就是一条可以再次返回的变化曲线（=可以循环）。
如果将其应用于渐变，则可以绘制波浪图案。

background-image: repeating-radial-gradient(circle at center, #6fb8d9, #70b9da 1.25%, #73bcdd 2.5%, #78c0e1 3.75%, #7fc6e6 5%, #86cdec 6.25%, #8cd3f2 7.5%, #93d9f7 8.75%, #98ddfb 10%, #9be0fe 11.25%, #9ce1ff 12.5%, #9be0fe 13.75%, #98ddfb 15%, #93d9f7 16.25%, #8cd3f2 17.5%, #86cdec 18.75%, #7fc6e6 20%, #78c0e1 21.25%, #73bcdd 22.5%, #70b9da 23.75%, #6fb8d9 25%); 

@mixin repeating-sine-radial-gradient(
  $position: circle at center,
  $color-start: #000000,
  $color-end: #ffffff,
  $repetition: 1
) {
  background-image: repeating-radial-gradient(
    $position,
    $color-start,
    mix($color-end, $color-start, 2.4%) calc(100 / $repetition) * 0.05%,
    mix($color-end, $color-start, 9.5%) calc(100 / $repetition) * 0.1%,
    mix($color-end, $color-start, 20.6%) calc(100 / $repetition) * 0.15%,
    mix($color-end, $color-start, 34.5%) calc(100 / $repetition) * 0.2%,
    mix($color-end, $color-start, 50%) calc(100 / $repetition) * 0.25%,
    mix($color-end, $color-start, 65.5%) calc(100 / $repetition) * 0.3%,
    mix($color-end, $color-start, 79.4%) calc(100 / $repetition) * 0.35%,
    mix($color-end, $color-start, 90.5%) calc(100 / $repetition) * 0.4%,
    mix($color-end, $color-start, 97.6%) calc(100 / $repetition) * 0.45%,
    $color-end calc(100 / $repetition) * 0.5%,
    mix($color-end, $color-start, 97.6%) calc(100 / $repetition) * 0.55%,
    mix($color-end, $color-start, 90.5%) calc(100 / $repetition) * 0.6%,
    mix($color-end, $color-start, 79.4%) calc(100 / $repetition) * 0.65%,
    mix($color-end, $color-start, 65.5%) calc(100 / $repetition) * 0.7%,
    mix($color-end, $color-start, 50%) calc(100 / $repetition) * 0.75%,
    mix($color-end, $color-start, 34.5%) calc(100 / $repetition) * 0.8%,
    mix($color-end, $color-start, 20.6%) calc(100 / $repetition) * 0.85%,
    mix($color-end, $color-start, 9.5%) calc(100 / $repetition) * 0.9%,
    mix($color-end, $color-start, 2.4%) calc(100 / $repetition) * 0.95%,
    $color-start calc(100 / $repetition) * 1%
  );
}

@include mixin.repeating-sine-radial-gradient($color-start: #6fb8d9, $color-end: #9ce1ff, $repetition: 4)

渐变案例

方格图案

我们能够通过改变变化程度来实现有趣的渐变，但通过将其与其他 CSS 属性相结合，甚至可以实现更多样化的表达。例如，您可以设置背景图像的混合级别，background-blend-mode这允许您执行类似的操作。

background-image: 
  repeating-linear-gradient(90deg, black 0 48px, white 48px 96px),
  repeating-linear-gradient(180deg, white 0 48px, black 48px 96px);
background-blend-mode:difference;

mix-blende-mode 使用回旋曲线的径向渐变来表达周边曝光，

波纹动画

与动画结合起来也很有趣。由于三角函数具有波形，因此它们也可以表示传播的波纹。

条纹动画

mask-image用于为条纹设置动画。

各种组合的动画

mix-blend-mode如果你结合 , mask-image，你可以做这样的事情。animation