CSS作為網(wǎng)頁(yè)設(shè)計(jì)中不可或缺的一部分，不僅可以讓網(wǎng)頁(yè)更美觀，還可以添加酷炫的動(dòng)畫(huà)效果，給用戶帶來(lái)更好的體驗(yàn)。下面就介紹幾種常見(jiàn)的CSS動(dòng)畫(huà)效果。

// 旋轉(zhuǎn)動(dòng)畫(huà)示例
.rotate {
width: 100px;
height: 100px;
background-color: #f00;
animation: rotate 2s ease-in-out infinite;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

上面這段代碼實(shí)現(xiàn)了一個(gè)元素的旋轉(zhuǎn)動(dòng)畫(huà)。首先定義.rotate樣式，定義其寬高和背景顏色，然后通過(guò)animation屬性來(lái)指定該元素應(yīng)用的動(dòng)畫(huà)效果，即rotate。該動(dòng)畫(huà)會(huì)在2秒內(nèi)執(zhí)行一次，并且設(shè)置為無(wú)限循環(huán)，直到頁(yè)面關(guān)閉。動(dòng)畫(huà)效果的實(shí)現(xiàn)通過(guò)@keyframes規(guī)則完成，rotate規(guī)則定義了動(dòng)畫(huà)執(zhí)行過(guò)程中元素旋轉(zhuǎn)的角度，0%對(duì)應(yīng)開(kāi)始，100%對(duì)應(yīng)結(jié)束。

// 漸變動(dòng)畫(huà)示例
.gradient {
width: 200px;
height: 200px;
background: linear-gradient(#f00, #00f);
background-size: 400% 400%;
-webkit-animation: gradient 8s ease infinite;
animation: gradient 8s ease infinite;
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}

上面這段代碼實(shí)現(xiàn)了一個(gè)元素的漸變動(dòng)畫(huà)效果。首先定義.gradient樣式，定義其寬高和漸變背景顏色，該樣式中使用了background-size屬性，將背景大小設(shè)置為400%，使得動(dòng)畫(huà)效果更加明顯。接著通過(guò)animation屬性指定該元素應(yīng)用的動(dòng)畫(huà)效果，即gradient。該動(dòng)畫(huà)將在8秒內(nèi)執(zhí)行，且循環(huán)無(wú)限次。動(dòng)畫(huà)的實(shí)現(xiàn)通過(guò)@keyframes規(guī)則完成，gradient規(guī)則定義了動(dòng)畫(huà)執(zhí)行過(guò)程中背景顏色的變化過(guò)程，每個(gè)百分比位置對(duì)應(yīng)不同的背景位置，達(dá)到了顏色的漸變效果。

以上就是兩種常見(jiàn)的CSS動(dòng)畫(huà)效果，通過(guò)在自己的網(wǎng)頁(yè)設(shè)計(jì)中應(yīng)用這些效果，可以讓網(wǎng)頁(yè)更生動(dòng)有趣。值得注意的是，在使用CSS動(dòng)畫(huà)效果時(shí)應(yīng)注意合理性和適度，避免過(guò)度使用導(dǎo)致性能問(wèn)題。