css实现文字颜色动态变化

这篇文章发表于 2021年11月05日,星期五,23:04
css实现文字颜色动态变化

css实现文子颜色动态变化

先看一下实际效果

你可以戳这里在线查看

实现代码:

.flow { height: 120px; background: linear-gradient(to right, red, orange, yellow, green, cyan, blue, purple); -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: hue 3s linear infinite; font-size: 100px; padding: 20px; } @keyframes hue { 0% { filter: hue-rotate(0deg); } 100% { filter: hue-rotate(360deg); } }

属性介绍:

hue-rotate通过滤镜来改变色相,超过360deg时就相当于绕一圈。加上动画就可以周期性的改变颜色来。

background-clip:text背景被裁减为文字的前景色。

-webkit-text-fill-color:transparent:指定文本字符的填充颜色为透明。

关于博主: 评论和私信会在第一时间回复
版权声明: 本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!