CSS3 - 渐变色文字的实现（附样例）

2024-02-06 发布：hangge 阅读：704

CSS3 提供了丰富的样式特性，其中之一是渐变色。通过巧妙地利用 CSS3 的 linear-gradient 属性，我们可以实现炫彩的渐变色文字效果。下面我将演示如何使用 CSS3 创建从上到下的线性渐变色文字。

1，实现原理

首先，使用 linear-gradient 属性创建一个线性渐变的背景。
接着使用 -webkit-background-clip 属性将背景限制在文字区域内。
最后通过 color 属性将文字的颜色设为透明。这样，文字将变得透明，只显示背景渐变。

2，演示样例

（1）下面代码创建了三个渐变文字：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>hangge.com</title>
  <style>
    .text-common {
      font-size: 48px;
      font-weight: bold;
    }

    /* 定义垂直渐变色样式 */
    .gradient-text-1 {
      background: linear-gradient(to bottom, #78D6D1, #2E908B); /* 从上到下渐变背景 */
      -webkit-background-clip: text; /* 使用文字作为背景裁剪 */
      color: transparent; /* 使文字透明，只显示背景 */
    }

    .gradient-text-2 {
      background: linear-gradient(to bottom, #83C8F9, #2D9BEA); /* 从上到下渐变背景 */
      -webkit-background-clip: text; /* 使用文字作为背景裁剪 */
      color: transparent; /* 使文字透明，只显示背景 */
    }

    .gradient-text-3 {
      background: linear-gradient(to bottom, #FFDD72, #EDB300); /* 从上到下渐变背景 */
      -webkit-background-clip: text; /* 使用文字作为背景裁剪 */
      color: transparent; /* 使文字透明，只显示背景 */
    }

  </style>
</head>
<body>
  <div class="text-common gradient-text-1">hangge.com</div>
  <div class="text-common gradient-text-2">12345679</div>
  <div class="text-common gradient-text-3">12345679</div>
</body>
</html>

（2）运行结果如下：