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：指定文本字符的填充颜色为透明。

我的个人网站的logo也是使用的这种效果 vwood.xyz