CSS3中的顏色過(guò)渡動(dòng)畫(huà)是一種很棒的效果,使得網(wǎng)頁(yè)變得更加生動(dòng)活潑。顏色過(guò)渡動(dòng)畫(huà)可以通過(guò) CSS3 的transition
屬性實(shí)現(xiàn)。以下是一個(gè)例子:
button { background-color: #00bfff; transition: background-color 1s ease; } button:hover { background-color: #1e90ff; }
上述代碼的意思是:對(duì)于名為 button 的元素,初始背景色為 #00bfff,并在 1 秒的時(shí)間內(nèi)以 ease(緩和)的速度過(guò)渡到當(dāng)鼠標(biāo)懸停時(shí)的背景色 #1e90ff。
顏色過(guò)渡動(dòng)畫(huà)的效果還可以在多個(gè)顏色之間進(jìn)行過(guò)渡,例如:
button { background: linear-gradient(to right, #00bfff, #1e90ff); transition: background 1s ease; } button:hover { background: linear-gradient(to right, #1e90ff, #ff1493); }
上述代碼的意思是:對(duì)于名為 button 的元素,初始背景色是從左到右漸變的流水線,顏色分別是 #00bfff 和 #1e90ff,并在 1 秒的時(shí)間內(nèi)以 ease(緩和)的速度過(guò)渡到當(dāng)鼠標(biāo)懸停時(shí)的背景色從左到右漸變的流水線,顏色分別是 #1e90ff 和 #ff1493。
顏色過(guò)渡動(dòng)畫(huà)使得 Web 開(kāi)發(fā)更加有趣,可以讓網(wǎng)頁(yè)呈現(xiàn)出更加豐富的交互效果。