CSS3提供了許多動(dòng)畫效果來豐富網(wǎng)頁的展示，其中上下抖動(dòng)效果可以在一些特定場景下增強(qiáng)頁面的視覺效果。

/* 上下抖動(dòng)動(dòng)畫 */
@keyframes shake {
0% {
transform: translate(0, 0);
}
20% {
transform: translate(0, -10px);
}
40% {
transform: translate(0, 10px);
}
60% {
transform: translate(0, -10px);
}
80% {
transform: translate(0, 10px);
}
100% {
transform: translate(0, 0);
}
}
/* 觸發(fā)動(dòng)畫的元素 */
.shake {
animation: shake 1s ease-in-out infinite;
}

以上代碼定義了一個(gè)名為“shake”的關(guān)鍵幀動(dòng)畫，通過transform屬性不斷地改變?cè)氐腨軸偏移量，實(shí)現(xiàn)上下抖動(dòng)效果。并通過animation屬性將動(dòng)畫應(yīng)用于類名為“shake”的元素，循環(huán)播放，達(dá)到持續(xù)抖動(dòng)的效果。

需要注意的是，在使用上下抖動(dòng)效果時(shí)，我們需要考慮用戶體驗(yàn)，不宜過度使用以免產(chǎn)生不必要的干擾和注意力分散。