CSS中實現(xiàn)元素左右移動，通?？梢酝ㄟ^設(shè)置元素的margin屬性或者transform屬性來實現(xiàn)。

設(shè)置margin屬性

margin屬性用于設(shè)置元素的外邊距，通過動態(tài)改變margin-left和margin-right的值，可以讓元素在水平方向上左右移動。

.container {
  width: 100px;
  height: 100px;
  background-color: blue;
  position: relative;
}
.container.move-left {
  margin-left: -20px;
}
.container.move-right {
  margin-right: -20px;
}

<div class="container move-left"></div>

設(shè)置transform屬性

transform屬性用于在不影響頁面布局的情況下對元素進行變換，通過改變transform: translateX()的值，可以讓元素在水平方向上左右移動。

.container {
  width: 100px;
  height: 100px;
  background-color: blue;
  position: relative;
}
.container.move-left {
  transform: translateX(-20px);
}
.container.move-right {
  transform: translateX(20px);
}

<div class="container move-left"></div>

動畫效果

為了實現(xiàn)更平滑的移動效果，可以使用CSS動畫（@keyframes）來定義移動路徑。

@keyframes move-left {
  from { transform: translateX(0); }
  to { transform: translateX(-20px); }
}
@keyframes move-right {
  from { transform: translateX(0); }
  to { transform: translateX(20px); }
}

然后應(yīng)用到元素上：

.container {
  width: 100px;
  height: 100px;
  background-color: blue;
  position: relative;
  animation: move-left 1s linear; /* or move-right */
}