CSS寫抖動效果 CSS可以利用關鍵幀動畫來實現抖動效果。下面我們將討論如何在CSS中實現抖動效果。 首先，我們會需要一個要抖動的元素。在這里，我們以一個div元素為例，并添加一個類名“shake”來給它附加一些樣式：

.shake {
position: relative;
animation: shake 0.3s;
}

其中，我們將元素的定位屬性設置為“relative”，這樣我們可以根據需要在其內部元素上設置絕對定位。 然后，我們為該元素添加關鍵幀動畫。以下是一個簡單的關鍵幀動畫示例，它將在0％和100％的時間點上將元素向左偏移3像素，然后在50％的時間點上向右偏移3像素：

@keyframes shake {
0% { left: -3px; }
50% { left: 3px; }
100% { left: -3px; }
}

最后，我們只需要在頁面中使用該“shake”類名，就能讓該元素在加載時抖動。 為了使抖動效果更加明顯，我們可以將關鍵幀動畫調整為更復雜的形式。例如，以下是一種抖動模式，它將在0％和100％的時間點上將元素向上偏移3像素，然后在50％的時間點上向下偏移3像素，并在25％和75％的時間點上減小元素的尺寸，然后在50％的時間點上將其恢復到原始大小：

@keyframes shake {
0%, 100% { transform: translate(0, -3px); }
25%, 75% { transform: translate(0, -1px) scale(0.95); }
50% { transform: translate(0, 3px) scale(1); }
}

這種抖動方式會更加花哨，可以適用于需要吸引用戶注意的動態元素。 總的來說，CSS可以輕松地實現各種類型的抖動效果。通過嘗試不同的關鍵幀動畫，我們可以為網站添加動態和活力。