本文已参与「新人创作礼」活动,一起开启掘金创作之路。 点击查看活动详情
写在前面
产品:页面这里的标题颜色要用五彩斑斓的黑。
我:...
产品:实现不了?
我:要不你还是让我看看五彩斑斓的黑是啥样的,让我开开眼。
产品:那就简单点,弄成五彩斑斓的效果就行了。
实现思路
一提到五彩斑斓我就想到了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%);
可是这个一般用于背景色,怎么把这个效果弄到字体上呢?
查了一下资料,发现了一个属性background-clip
可以设置元素的背景,把属性设为background-clip: text
后,可以设置以文字的范围裁剪背景图片,只要设置了这个属性,文字范围内的背景颜色就失效了。
background: red;
-webkit-background-clip: text;
会发现文字范围内的背景色是被盖住了的
既然这个属性是以文字范围来遮盖原有的背景色,那我们把文字颜色设成透明,不就可以露出后面的渐变背景色了吗
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;
这样通过透明的文字,露出文字范围内的渐变色背景,就形成了渐变的文字效果了
加上动画效果
你以为这就完了?这个时候我们给背景加上动画,开启闪瞎氪金眼效果。让背景不断的移动,从文字里露出的部分不断变化,最终形成文字动画效果。
@keyframes act-colorful {
0% {
background-position: 0 0;
}
100% {
background-position: -100%, 0;
}
}
实际的动画效果是很流畅的,这里的闪动是因为gif重新播放导致的