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

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 许可协议。转载请注明出处!