CSS有很多有趣的效果，如今我們要討論的是css搖晃的類樣式。這種樣式可以讓元素在網(wǎng)頁(yè)中動(dò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); }
}

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

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

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

<div class="shake">
我正在搖動(dòng)！
</div>

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

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

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