CSS3中,我們可以利用@keyframes
規(guī)則來創(chuàng)建文字動畫,以下是一個簡單的示例,展示如何將一個靜態(tài)的文本段落轉(zhuǎn)化為一個有趣的動畫:
1、定義一個動畫關(guān)鍵幀:
@keyframes text-animation { 0% { color: red; } 50% { color: blue; } 100% { color: green; } }
在這個示例中,我們創(chuàng)建了一個名為text-animation
的動畫,在動畫開始時(0%),文本顏色為紅色;在動畫中間(50%),文本顏色變?yōu)樗{色;而在動畫結(jié)束(100%),文本顏色變?yōu)榫G色。
2、應(yīng)用動畫到文本:
p { animation: text-animation 2s infinite; }
我們將text-animation
應(yīng)用到一個段落(p
元素)上。2s
表示動畫的持續(xù)時間,infinite
表示動畫將無限重復(fù)。
3、完整的CSS代碼:
@keyframes text-animation { 0% { color: red; } 50% { color: blue; } 100% { color: green; } } p { animation: text-animation 2s infinite; }
段落中的文本將按照我們定義的動畫進行顏色變換,你可以根據(jù)自己的需求調(diào)整動畫的關(guān)鍵幀和持續(xù)時間。