css一个文字两个颜色 |css3 2秒后显示

.colorful-text {
background: -webkit-linear-gradient(left, #e74c3c, #e74c3c 50%, #2ecc71 50%, #2ecc71);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

以上代码是让文字实现双色效果的核心代码，解释如下：

• background: -webkit-linear-gradient(left, #e74c3c, #e74c3c 50%, #2ecc71 50%, #2ecc71);
• 这行代码定义了一个渐变色，从左向右渐变
• #e74c3c是红色
• #2ecc71是绿色
• 50%的位置是渐变的分界点
• -webkit-background-clip: text;
• 这行代码是设置背景的限制范围，也就是背景只填充文本的区域
• -webkit-text-fill-color: transparent;
• 这行代码是将文字颜色设为透明

有了上面的CSS样式，大家只需要在需要实现双色效果的文字的HTML标签上加上这个CSS类名即可：

这是一段双色文字的例子

在浏览器中打开上述例子，你将会看到一段红绿渐变的双色文字。

这个技巧可以应用在很多需要突出显示的场景中，比如特殊标签名、重要信息等。