CSS左右搖擺動作的實現(xiàn)方法

在CSS中，我們可以通過使用@keyframes規(guī)則來創(chuàng)建動畫，以下是一個實現(xiàn)左右搖擺動作的示例：

@keyframes swing {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(10deg);
  }
  100% {
    transform: rotate(-10deg);
  }
}
.swing-element {
  animation: swing 1s infinite;
}

在這個示例中，我們創(chuàng)建了一個名為swing的動畫，其中元素在0%時處于初始位置（rotate(0deg)），在50%時向右旋轉(zhuǎn)10度（rotate(10deg)），然后在100%時返回初始位置，但方向相反（rotate(-10deg)）。swing-element類應(yīng)用了這個動畫，使其以1秒的持續(xù)時間無限循環(huán)。

你可以根據(jù)需要調(diào)整動畫的持續(xù)時間、旋轉(zhuǎn)角度以及循環(huán)次數(shù)，如果你想要更強烈的搖擺效果，可以增加旋轉(zhuǎn)角度；如果你想要更慢的效果，可以增加持續(xù)時間。