返回 导航

HTML5 / CSS3

hangge.com

CSS3 - 渐变色文字的实现(附样例)

作者:hangge | 2024-02-06 09:07
   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)运行结果如下:
评论

全部评论(0)

回到顶部