CSS搖一搖動(dòng)畫效果是一種常見的網(wǎng)頁(yè)交互效果，它可以吸引用戶的注意并增加網(wǎng)頁(yè)的趣味性。本文將介紹如何使用CSS來(lái)實(shí)現(xiàn)搖一搖動(dòng)畫效果。

/* 定義動(dòng)畫 */
@keyframes shake {
0% {
transform: rotate(0deg);
}
20% {
transform: rotate(20deg);
}
40% {
transform: rotate(-20deg);
}
60% {
transform: rotate(20deg);
}
80% {
transform: rotate(-20deg);
}
100% {
transform: rotate(0deg);
}
}
/* 應(yīng)用動(dòng)畫 */
.shake {
animation: shake 1s infinite;
}

上面的代碼定義了一個(gè)名為“shake”的動(dòng)畫，包含了6個(gè)關(guān)鍵幀，分別在動(dòng)畫的不同時(shí)間點(diǎn)設(shè)置不同的旋轉(zhuǎn)角度，來(lái)實(shí)現(xiàn)整個(gè)動(dòng)畫的搖晃效果。同時(shí)，通過(guò)將“shake”動(dòng)畫應(yīng)用到一個(gè)擁有“.shake”類名的HTML元素上，可以使得該元素在頁(yè)面中周期性地?cái)[動(dòng)起來(lái)。

同樣的，我們還可以通過(guò)調(diào)整動(dòng)畫中的關(guān)鍵幀，來(lái)實(shí)現(xiàn)不同的搖一搖動(dòng)畫效果。例如在旋轉(zhuǎn)動(dòng)畫的基礎(chǔ)上，再加上上下晃動(dòng)、左右滑動(dòng)等往復(fù)運(yùn)動(dòng)的關(guān)鍵幀，就能實(shí)現(xiàn)更加復(fù)雜的交互效果。

總的來(lái)說(shuō)，CSS搖一搖動(dòng)畫效果的實(shí)現(xiàn)是一種很簡(jiǎn)單的技術(shù)，但它卻能在網(wǎng)頁(yè)交互中起到很大的作用，使得網(wǎng)頁(yè)更加生動(dòng)有趣，提高用戶的體驗(yàn)感。