CSS+字體漸變彩虹是一種非常炫酷的效果,它可以為網(wǎng)頁文本添加彩虹色,讓網(wǎng)頁看起來更加美觀。在此,我們將介紹如何使用CSS+字體漸變彩虹實現(xiàn)這一效果。
@charset "utf-8";
/*定義漸變顏色*/
@-webkit-keyframes rainbow {
0%{color:red;}
20%{color:orange;}
40%{color:yellow;}
60%{color:green;}
80%{color:blue;}
100%{color:purple;}
}
/*應(yīng)用漸變*/
body {
font-family: Arial, sans-serif;
font-size: 3rem;
-webkit-animation: rainbow 5s infinite;
}
如上代碼,我們先定義漸變顏色,在這里使用了@-webkit-keyframes關(guān)鍵字。然后將漸變顏色應(yīng)用在body標(biāo)簽上。這里使用了-webkit-animation與rainbow和5s infinite這兩個屬性來指定動畫名稱和效果。
這樣,我們就成功實現(xiàn)了CSS+字體漸變彩虹效果。此外,我們還可以針對不同的網(wǎng)頁元素進(jìn)行不同的漸變顏色設(shè)置,比如對標(biāo)題、段落等各自設(shè)置不同的顏色。
下一篇css+背景色高亮