CSS是一種非常強大的前端樣式語言，它可以幫助我們創(chuàng)建各種酷炫的效果。比如，我們可以利用CSS實現(xiàn)頁面元素的震動效果。下面就來了解一下如何實現(xiàn)這種效果。

/* 震動動畫 */
@keyframes shake {
0% { transform: translate(0, 0); }
10%, 90% { transform: translate(-10px, 0); }
20%, 80% { transform: translate(10px, 0); }
30%, 50%, 70% { transform: translate(-10px, 0); }
40%, 60% { transform: translate(10px, 0); }
100% { transform: translate(0, 0); }
}
/* 添加震動效果的類 */
.shake {
animation-duration: 1s;
animation-fill-mode: both;
animation-iteration-count: infinite;
animation-name: shake;
}

首先，我們需要使用CSS3的關鍵幀動畫來定義震動動畫。我們定義了六個關鍵幀，分別對應不同的位置和變化。在關鍵幀中，我們使用transform屬性來控制元素的移動。其中translate函數(shù)用于控制元素在垂直和水平方向上的偏移量。

接下來，我們定義一個類名為shake的類，將震動動畫應用于其中。在該類中，我們使用animation-duration屬性來設置動畫的持續(xù)時間，animation-fill-mode來設置動畫結束后是否保留最后一幀的狀態(tài)，animation-iteration-count來設置動畫循環(huán)播放的次數(shù)，animation-name來指定要應用的關鍵幀動畫名稱。

最后，我們可以將該類應用于頁面元素中，即可實現(xiàn)震動效果。例如，如果要將一個按鈕進行震動，可以在其元素中添加class="shake"，然后就能看到按鈕震動的效果了。