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)