CSS3实现彩色炫酷文字

您所在的位置：网站首页 › html彩字代码 › CSS3实现彩色炫酷文字

CSS3实现彩色炫酷文字

2024-06-05 20:21| 来源: 网络整理| 查看: 265

我们今天要使用CSS3实现下面这样的酷酷的效果：

彩色炫酷文字

要实现这样的效果只需要三步：

设置渐变背景色；按照文字拆分背景；去掉文字本身的颜色；设置动画。

我们也按照这个步骤一步一步的写出样式，首先给出HTML结构：

代码语言：javascript复制这里是彩色的文字

然后给出初始的CSS结构:

代码语言：javascript复制.color-text { text-align: center; font-size: 40px; }

此时效果大概是这个样子:

初始样式一、设置渐变背景色代码语言：javascript复制.color-text { text-align: center; font-size: 40px; background-image: -webkit-linear-gradient(left, blue, #66ffff 10%, #cc00ff 20%, #CC00CC 30%, #CCCCFF 40%, #00FFFF 50%, #CCCCFF 60%, #CC00CC 70%, #CC00FF 80%, #66FFFF 90%, blue 100%); }

这里需要注意一点是渐变背景色应该是按照50%对称的不然就会出现断层。这个时候的效果大概是这个样子了：

设置渐变色二、按照文字拆分背景代码语言：javascript复制.color-text { text-align: center; font-size: 40px; background-image: -webkit-linear-gradient(left, blue, #66ffff 10%, #cc00ff 20%, #CC00CC 30%, #CCCCFF 40%, #00FFFF 50%, #CCCCFF 60%, #CC00CC 70%, #CC00FF 80%, #66FFFF 90%, blue 100%); -webkit-background-clip: text; }

此时的效果是：

按照文字拆分背景

咦？貌似没什么效果？其实仔细看你可以看到文字已经不是默认的那种黑色了，其实已经生效了，只是字体本身的颜色把背景色覆盖了。

三、去掉文字本身的颜色代码语言：javascript复制.color-text { text-align: center; font-size: 40px; background-image: -webkit-linear-gradient(left, blue, #66ffff 10%, #cc00ff 20%, #CC00CC 30%, #CCCCFF 40%, #00FFFF 50%, #CCCCFF 60%, #CC00CC 70%, #CC00FF 80%, #66FFFF 90%, blue 100%); -webkit-background-clip: text; color: transparent; }

去掉字体本身的颜色CSS3还有一种方法叫text-fill-color他可以设置文字的填充色优先级比color高，我们也可以使用它来代替color: transparent;：

代码语言：javascript复制-webkit-text-fill-color: transparent;

此时的效果是:

去掉文字本身的颜色四、设置动画代码语言：javascript复制.color-text { text-align: center; font-size: 40px; /* 设置背景透明色 */ background-image: -webkit-linear-gradient(left, blue, #66ffff 10%, #cc00ff 20%, #CC00CC 30%, #CCCCFF 40%, #00FFFF 50%, #CCCCFF 60%, #CC00CC 70%, #CC00FF 80%, #66FFFF 90%, blue 100%); /* 改变background-size是为了让动画动起来 */ background-size: 200% 100%; /* 按照文字拆分背景 */ -webkit-background-clip: text; /* 将字体设置成透明色 */ -webkit-text-fill-color: transparent; /* 启用动画 */ animation: masked-animation 4s linear infinite; } @keyframes masked-animation { 0% { background-position: 0 0; } 100% { background-position: -100% 0; } }

通过这样设置我们就大功告成了!

进阶

上面使用到了text-fill-color，我们可以在这里看看它的兼容性。它的一大用途就是上面这样设置炫酷的彩色文字，还有一个用途就是设置镂空文字，如下。 HTML：

代码语言：javascript复制镂空文字

CSS：

代码语言：javascript复制.hollow-out-text{ text-align: center; font-size: 40px; /*设置背景透明*/ -webkit-text-fill-color: transparent; /*设置镂空线条*/ -webkit-text-stroke: 1px #cc00ff; }

最终效果：

镂空文字

【本文地址】

CSS3实现彩色炫酷文字

CSS3实现彩色炫酷文字

今日新闻

推荐新闻