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）