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