CSS3上下文字漸變

/* 漸變顏色 */
.gradient {
background: linear-gradient(to bottom, #f00, #00f);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* 滾動動畫 */
.marquee {
overflow: hidden;
}
.marquee p {
display: inline-block;
margin: 0 2em;
white-space: nowrap;
/* 關鍵：讓文字在視窗外可見 */
transform: translate(0, 100%);
animation: marquee 5s linear infinite;
}
@keyframes marquee {
0% {
transform: translate(0, 100%);
}
100% {
transform: translate(0, -100%);
}
}

CSS3的漸變色可以使用線性漸變或徑向漸變，其中線性漸變通過設定開始和結束的顏色值完成漸變。而本文中我們使用的是從上到下的線性漸變：`background: linear-gradient(to bottom, #f00, #00f);`

當我們想要實現文本漸變時，我們可以使用`-webkit-background-clip`和`-webkit-text-fill-color`屬性：`-webkit-background-clip: text;`將背景剪切為文本，使背景出現在文本后面，而`-webkit-text-fill-color: transparent;`將文本顏色設為透明，使得漸變色顯示出來。

最終的效果是這樣的：

當然，我們也可以加入滾動動畫來讓文字動起來。在這里，我們使用比較典型的CSS3動畫：`animation: marquee 5s linear infinite;`就可以讓文字滾動起來了。而`transform: translate(0, 100%);`將文本的位置設置為視窗下方，從而讓文字在視窗外可見。

最終的代碼是這樣的：

通過這樣的效果，我們可以在各種設計場景下使用文字漸變來美化頁面。