CSS有很多有趣的效果，如今我們要討論的是css搖晃的類樣式。這種樣式可以讓元素在網(wǎng)頁中動態(tài)地?fù)u晃

.shake {
animation: shake 0.5s;
animation-iteration-count: infinite;
}
@keyframes shake {
0% { transform: translate(0); }
25% { transform: translate(10px, 0); }
75% { transform: translate(-10px, 0); }
100% { transform: translate(0); }
}

這里我們定義了一個名為“shake”的類樣式。在該類樣式中，我們設(shè)置了兩個屬性： animation 和 animation-iteration-count。 animation 屬性指定元素應(yīng)該如何動畫，我們的“shake”效果是通過“shake”關(guān)鍵幀實現(xiàn)的。 animation-iteration-count 屬性指定動畫應(yīng)該無限度地重復(fù)。

在" shake "關(guān)鍵幀的定義中，我們將" transform "屬性設(shè)置為讓元素沿x軸振動。最終產(chǎn)生的效果是搖晃。

理解上述代碼后，您可以將類樣式應(yīng)用于元素，例如：

<div class="shake">
我正在搖動！
</div>

這是產(chǎn)生的效果。

這種效果不僅可以用于文本，還可以用于按鈕、圖標(biāo)等圖形元素。

使用css搖晃類樣式是非常簡單的，但確實可以為您的網(wǎng)站增添一份活力！