CSS晃動效果怎么寫？

在CSS中，晃動效果可以通過使用@keyframes規(guī)則來創(chuàng)建。@keyframes規(guī)則用于定義動畫，其中可以包含多個關鍵幀，每個關鍵幀描述動畫的一個狀態(tài)，下面是一個簡單的例子，展示了如何創(chuàng)建晃動效果：

1、定義一個動畫名稱，例如shake：

@keyframes shake {
  0% { transform: rotate(0deg); }
  20% { transform: rotate(-5deg); }
  40% { transform: rotate(5deg); }
  60% { transform: rotate(-5deg); }
  80% { transform: rotate(5deg); }
  100% { transform: rotate(0deg); }
}

2、將這個動畫應用到需要晃動的元素上，例如一個div元素：

div {
  animation: shake 0.5s;
}

在這個例子中，div元素會在0.5秒內(nèi)完成一個晃動效果，你可以根據(jù)需要調(diào)整動畫的持續(xù)時間、晃動的角度和次數(shù)。

除了transform: rotate()函數(shù)外，你還可以使用其他CSS屬性來創(chuàng)建更豐富的晃動效果，你可以使用transform: translate()來移動元素，或者使用filter: blur()來添加模糊效果，這些屬性都可以幫助你創(chuàng)建出更加獨特和吸引人的晃動效果。