彩色渐变动态字体特效，拿去炫

CSS

发布日期: 2022-12-01

最近有看到一个网站用到的醒目标题字体特效蛮炫酷，就看了下代码，学习了一下，其实不难，CSS便可实现，让我们一起来学习一下吧！！

一、前置知识

background-clip:text

背景属性 background的clip属性规定背景的绘制区域。官网对background-clip的解释我理解为类似于P图软件 photoshop中的剪切蒙版的效果

而W3C标准中，给定了三个值，分别是：border-box、padding-box、content-box

属性名	描述
border-box	背景被裁剪到边框盒。
padding-box	背景被裁剪到内边距框。
content-box	背景被裁剪到内容框。

言归正传，我们使用的 background-clip: text,就是以文字的范围来裁剪背景图片。

当然这个属性有它的兼容性，只支持谷歌，如果其他浏览器想使用可以写成-webkit-background-clip: text;

去W3C深入学习学习~

text-fill-color

文字的填充色(fill填充)，同理，目前兼容谷歌，其他浏览器想兼容，可加上 -webkit-;

我们用于设置镂空字体。

linear-gradient()

linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。

创建一个线性渐变，需要指定两种颜色，还可以实现不同方向（指定为一个角度）的渐变效果，如果不指定方向，默认从上到下渐变。

@keyframes

使用 @keyframes规则，可以用来创建动画。

创建动画是通过动画形式逐步从一个CSS样式变化到另一个样式

指定的变化时使用 % 或关键字 from 和 to,同 0% - 100%

0%是开头动画，100%是动画结束；

当然，这也是约定式的写法，这样写可以获取最优的动画体验。

去W3c温习一下~

二、彩虹文字🌈

文字颜色属性只支持纯色，如果想实现渐变彩虹颜色，该如何，实现呢？

那就是神器 -webkit-linear-gradient，上面我们有介绍到，linear-gradient可以创建一个线型渐变，那么我们可以先color: transparent将文字颜色设置为透明色，然后使用background-clip: text设置背景根据文字形状裁剪，最后设置渐变背景即可完成渐变彩虹文字🌈

.lemma-desc {
font-size: 18px;
color: transparent;
background: -webkit-linear-gradient(30deg, #f7cd5c 25%, #68eaf4 50%, #8aa9ff 75%, #7cffee 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-size: auto;
}

三、让文字滚动起来

所谓滚动效果就是让背景色的偏移变换、那结合前置知识我们让动画实现背景的position变换就可以实现这一点

@keyframes animationText {
    0% {
        background-position: 0;
    }
    100% {
        background-position: 100000px;
    }
}

.lemma-desc {
font-size: 18px;
color: transparent;
background: -webkit-linear-gradient(30deg, #f7cd5c 25%, #68eaf4 50%, #8aa9ff 75%, #7cffee 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-size: auto;
animation: animationText 300s infinite linear;
-webkit-animation: animationText 300s infinite linear;    
}