64-文字渐变效果

<!--
 * @Descripttion: 
 * @Author: voanit
 * @Date: 2022-12-02 21:21:24
 * @LastEditors: voanit
 * @LastEditTime: 2022-12-02 21:45:57
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .gradient-text {
      width: 800px;
      font-size: 140px;
      color: transparent;
      background: -webkit-linear-gradient(360deg,red, #32c5ff 25%, #b620e0 50%, #f7b500 75%, #20e050 100%);
      background-clip: text;
      -webkit-background-clip: text;
      /* -webkit-text-fill-color: transparent; */
      /* background-size: auto; */
      
    }
  

.gradient-text {
    animation: gradientText 30s infinite linear;
    -webkit-animation: gradientText 300s infinite linear;
}
@keyframes gradientText {
    0% {
        background-position: 0;
    }
    100% {
        background-position: 8000px;
    }}
  </style>
</head>
<body>
  <div class="gradient-text">web~前端</div>
</body>
</html>

前篇章已经介绍过background-color背景色、background-image背景图片的使用，在css 中还可以使用渐变作为背景，其控制和性能方面比使用实际图像文件更好。如果你还不了解background(背景属性)，可以先看看这篇文章：前端入门——css颜色和背景。

什么是css 渐变

CSS 渐变通常是一种颜色淡入到另一种颜色，CSS 允许您控制渐变的方方面面，从方向、形状再到颜色以及它们如何从一种颜色过渡到另一种颜色。实际上，渐变分为三种类型：

线性渐变（linear-gradient）
径向渐变（radial-gradient）
圆锥渐变（conic-gradient）
重复渐变 —— 使用 repeating-linear-gradient 和 repeating-radial-gradient创建线性和径向重复渐变。

下面是基本语法：

/* 线性渐变 */
background-image: linear-gradient(#ff8a00, #e52e71);
background-image: linear-gradient(to right, violet, darkred, purple);
background-image: linear-gradient(40deg, rgb(255 0 0) 60%, orange);

/* 径向渐变 */
background-image: radial-gradient(#ff8a00, #e52e71);
background-image: radial-gradient(circle at top right, #ff8a00, red, #e52e71);

/*圆锥渐变 */
background-image: conic-gradient(#ff8a00, #e52e71);
background-image: conic-gradient(red 50deg, yellow 100deg, lime 200deg, aqua, blue, magenta, red);

效果如下：

下面是重复渐变：

/*重复渐变 */
background: repeating-linear-gradient(red, yellow 10%, green 15%);
background: repeating-radial-gradient(red, yellow 10%, green 15%)；

线性重复渐变

径向重复渐变

所有的 CSS 渐变类型都是一个颜色范围。CSS 渐变产生的颜色可以随位置不断变化，从而产生平滑的颜色过渡。也可以创建纯色带和两种颜色之间的硬过渡。以下内容适用于所有渐变函数：

使用多种颜色

无需局限于使用两种颜色，你想使用多少种颜色都可以！默认情况下，所设置的颜色会均匀分布在渐变路径中。

如下示例：

颜色终止位置

你可以通过给每个颜色设置 0，1% 或者 2% 或者其他的绝对数值来调整它们的位置。如果你将位置设置为百分数， 0% 表示起始点，而 100% 表示终点，但是如果需要的话你也可以设置这个范围之外的其他值来达到你想要的效果。如果有些位置你没有明确设置，那么它将会被自动计算，第一种颜色会在 0% 处停止，而最后一种颜色是 100%，至于其他颜色则是在它邻近的两种颜色的中间停止。

如下示例：

创建实线

要在两种颜色之间创建一条硬线，即创建一个条纹而不是逐渐过渡，可以将相邻的颜色停止设置为相同的位置。在此示例中，两种颜色在 50% 标记处共享一个颜色停止点，即渐变得一半：

改变渐变中心点

默认情况下，渐变会平滑地从一种颜色过渡到另一种颜色。你可以通过设置一个值来将渐变的中心点移动到指定位置。在如下示例中，我们将渐变的中心点由 50% 设为 10%。

最后

以上内容，大概介绍了css 渐变所包含的知识点，下面将会分多篇文章来介绍每种渐变的使用方法，你可以关注我，继续学习其它渐变知识。

其它相关文章：

css 线性渐变
css 径向渐变
css 圆锥渐变
css 重复渐变

参考资料：

https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Images/Using_CSS_gradients

https://css-tricks.com/a-complete-guide-to-css-gradients/

：测试浏览器版本号——chrome 75.0.3770.80；opera 60.0.3255.109；firefox 67.0；ie 11。

之前《CSS之图片特殊用法》有讲过不同用途的image属性，渐变作为image的属性值参与以上用途。下面主要讲一讲渐变的实际用法。

一线性渐变（linear-gradient)

1 使用direction控制渐变方向

语法：

background-image: linear-gradient(to direction, color-1 percentage-1/length-1,color-2 percentage-2/length-2,...);

解释说明：

to direction表示的是渐变的方向，可以省略不写，若省略，则默认从上到下；direction可以是单个方向参数如top/bottom/left/right，也可以是两个方向参数如bottom right，其表示从左上角到右下角渐变。
后面color参数至少有两个。
length参数表示当前颜色中心线位置，百分比percentage参数也表示当前颜色中心线的位置，可以省略，若省略则按照下图规则。

以上图为例，五种颜色将空间均分成四等份，其中五条分割线为各自颜色的中心线，以此为基准颜色渐变。

下面给出几个具体案例

/*方向缺省，百分比缺省，渐变从上到下，五种颜色按规则渐变*/
background-image: linear-gradient(red, yellow,blue,orange,black);
/*从左到右，按照百分比渐变*/
background-image: linear-gradient(to right, red 10%, yellow 30%,blue 70%,orange 90%,black);
/*从左上到右下，按照具体像素渐变*/
background-image: linear-gradient(to bottom right, red 10px, yellow 150px,blue 170px,orange 200px,black);

2 使用angle控制渐变方向

语法：

background-image: linear-gradient(angle, color-1 percentage-1/length-1,color-2 percentage-2/length-2,...);

与上述（使用direction控制渐变方向）渐变方式唯一的区别就是该方法是使用角度（angle）控制方向，下图可以看出其渐变规则。当角度为0deg时，渐变方向从下到上；当角度是90deg时，渐变方向从左到右。

二径向渐变（radial-gradient)

径向渐变由中心向外进行颜色渐变。

语法

background-image: radial-gradient(size shape, color-1 percentage-1/length-1, color-2 percentage-2/length-2, ...);

解释说明：

size参数定义渐变的大小，值可以是closest-side | farthest-side | closest-corner | farthest-corner | <length>。<length>可以去取单值，表示渐变形状为圆形（circle）且渐变半径为该值；也可以取双值，表示渐变形状为椭圆（ellipse）且其值依次为渐变的横轴半径和纵轴半径。该值也可以缺省，其默认值与shape有关，当shape为circle时，其默认值为farthest-corner；当shape为ellipse时，其默认值与容器尺寸相关，其横轴半径为容器宽的一半，纵轴半径为容器高的一半。
shape参数定义渐变的形状，值可以是circe | ellipse。该值也可以缺省，默认值为ellipse。
渐变中心点的位置可以自定义，语法为circle at 20px 50px或者ellipse at 20% 50%

三重复渐变（repeating-linear-gradient或者repeating-radial-gradient)

语法

/*重复线性渐变*/
background-image: repeating-linear-gradient(to direction, color-1 percentage-1/length-1,color-2 percentage-2/length-2,...); 
/*重复径向渐变*/
background-image: repeating-radial-gradient(size shape, color-1 percentage-1/length-1, color-2 percentage-2/length-2, ...);

解释说明：

只需加repeating-即可变成重复渐变，其他参数没有变化。
最后一种颜色后必须加percentage/length参数，且其小于容器尺寸，否则没有重复渐变。

四边框渐变

上面以背景为例讲述了渐变的分类及实现，下面简单扩展一下，讲一讲边框的渐变，之前写过一篇文章《CSS之图片特殊用法》，里面有讲到将图片作为边框的背景，渐变神色与上述情况类似，只需要将图片地址改为渐变色就可以了，示例代码如下

border-image: linear-gradient( blue ,green ,yellow ,black) 10;

五字体颜色渐变

同样由《CSS之图片特殊用法》可以延伸，要是字体颜色渐变，只需要将背景图改为渐变色就可以了，具体代码如下：

background-image:radial-gradient( blue 10px,green 20px,yellow ,black); 
background-clip: text;
-webkit-background-clip: text; /*兼容chrome*/
color: transparent;

注：background-clip有兼容性问题，此需要根据浏览器不同使用不同的代码；text属性值目前是实验性值，且其在ie中无效，不建议在生产环境中使用。

在线咨询

上一篇：修改htmlElement的原型，返回当前对象的pr
下一篇：Ionic一个非常优秀的开源免费移动应用程序开发框架

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

64-文字渐变效果

什么是css 渐变

使用多种颜色

颜色终止位置

创建实线

改变渐变中心点

最后

一 线性渐变（linear-gradient)

二 径向渐变（radial-gradient)

三 重复渐变（repeating-linear-gradient或者repeating-radial-gradient)

四 边框渐变

五 字体颜色渐变

您的项目需求

一线性渐变（linear-gradient)

二径向渐变（radial-gradient)

三重复渐变（repeating-linear-gradient或者repeating-radial-gradient)

四边框渐变

五字体颜色渐变