CSS固定搖擺的方法

在CSS中，我們可以使用position屬性來固定一個元素的位置，使其不受其他元素的影響，如果我們想要固定一個搖擺元素，使其在一定范圍內(nèi)來回擺動，那么我們需要使用transform屬性來實現(xiàn)。

我們可以使用transform: rotate()函數(shù)來將元素旋轉(zhuǎn)一定的角度，然后使用animation屬性來定義旋轉(zhuǎn)的動畫效果，以下是一個示例代碼：

.swing {
  position: relative;
  width: 100px;
  height: 100px;
  background-color: #333;
  transform: rotate(0deg);
  animation: swing 2s infinite;
}
@keyframes swing {
  0% { transform: rotate(0deg); }
  50% { transform: rotate(30deg); }
  100% { transform: rotate(0deg); }
}

在這個示例中，我們定義了一個名為swing的動畫，該動畫將元素從0度旋轉(zhuǎn)到30度，然后再旋轉(zhuǎn)回0度。animation屬性中的2s表示動畫的持續(xù)時間為2秒，infinite表示動畫將無限循環(huán)。

通過這種方法，我們可以輕松地固定一個搖擺元素，并使其在一定范圍內(nèi)來回擺動。