css3实现流光字体

Posted 2021-04-09 前端小知识点

我们要实现的效果

主要实现通过css3实现，具体实现方法如下

一、绘制渐变背景图

background-image: -webkit-linear-gradient(left, #3880ce, #f010be 25%, #3880ce 50%, #f010be 75%, #3880ce 100%);

background-image: -o-linear-gradient(left, #3880ce, #f010be 25%, #3880ce 50%, #f010be 75%, #3880ce 100%);

background-image: linear-gradient(to right, #3880ce, #f010be 25%, #3880ce 50%, #f010be 75%, #3880ce 100%);

使用CSS3的渐变绘制图像，从左到右。需要注意的是颜色是 0到25%的颜色组 = 50%到75%的颜色组，且最后100%的颜色要和开头0的颜色相等，这是为了能无缝衔接流光效果

二、裁剪背景图

-webkit-background-clip: text;

使用文字作为裁剪区域向外裁剪，此时文字颜色仍覆盖背景图

三、设置字体颜色

-webkit-text-fill-color: transparent; 

或者：

color: transparent;

将字体颜色设置成透明，这样就能将背景图显示出来了

四、设置背景图长度

background-size: 200% 100%;

将背景图宽度拉长至两倍，之前设置background-image的两份相同的颜色组，就是为了能在此拉长后只显示一份颜色组，另外超出的半截颜色组用来实现流光效果

五、通过动画改变背景图的位置实现流光效果:

animation: masked-animation 5s infinite linear;

@keyframes masked-animation{

 0%{background-position:0 0}

100%{background-position:-100% 0}

}

喜欢简单的简洁的前端小知识点，请长按、关注