css实现文字颜色动态变化

发表于 阅读 15
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:指定文本字符的填充颜色为透明。

相关文章