纯CSS实现五彩斑斓的文字效果

454 阅读2分钟

本文已参与「新人创作礼」活动,一起开启掘金创作之路。 点击查看活动详情

写在前面

产品:页面这里的标题颜色要用五彩斑斓的黑。

我:...

产品:实现不了?

我:要不你还是让我看看五彩斑斓的黑是啥样的,让我开开眼。

产品:那就简单点,弄成五彩斑斓的效果就行了。

实现思路

一提到五彩斑斓我就想到了CSS的渐变色效果

background: -webkit-linear-gradient(left, 
    #ffffff#ff0000 6.25%#ff7d00 12.5%#ffff00 18.75%#00ff00 25%#00ffff 31.25%#0000ff 37.5%#ff00ff 43.75%#ffff00 50%#ff0000 56.25%#ff7d00 62.5%#ffff00 68.75%#00ff00 75%#00ffff 81.25%#0000ff 87.5%#ff00ff 93.75%#ffff00 100%);

image.png

可是这个一般用于背景色,怎么把这个效果弄到字体上呢?

查了一下资料,发现了一个属性background-clip可以设置元素的背景,把属性设为background-clip: text后,可以设置以文字的范围裁剪背景图片,只要设置了这个属性,文字范围内的背景颜色就失效了。

background: red;
-webkit-background-clip: text;

会发现文字范围内的背景色是被盖住了的

image.png

既然这个属性是以文字范围来遮盖原有的背景色,那我们把文字颜色设成透明,不就可以露出后面的渐变背景色了吗

background: -webkit-linear-gradient(left, 
    #ffffff#ff0000 6.25%#ff7d00 12.5%#ffff00 18.75%#00ff00 25%#00ffff 31.25%#0000ff 37.5%#ff00ff 43.75%#ffff00 50%#ff0000 56.25%#ff7d00 62.5%#ffff00 68.75%#00ff00 75%#00ffff 81.25%#0000ff 87.5%#ff00ff 93.75%#ffff00 100%);
-webkit-background-clip: text;
color: transparent;

这样通过透明的文字,露出文字范围内的渐变色背景,就形成了渐变的文字效果了 image.png

加上动画效果

你以为这就完了?这个时候我们给背景加上动画,开启闪瞎氪金眼效果。让背景不断的移动,从文字里露出的部分不断变化,最终形成文字动画效果。

@keyframes act-colorful {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -100%, 0;
  }
}

colorful2.gif

实际的动画效果是很流畅的,这里的闪动是因为gif重新播放导致的