CSS控制圖像移動(dòng)的方法

在CSS中，我們可以使用transform屬性來(lái)移動(dòng)圖像，為了讓圖像向左移動(dòng)，我們可以使用translateX函數(shù)，并將其值設(shè)置為負(fù)數(shù)，這樣，圖像就會(huì)向左移動(dòng)相應(yīng)的距離。

如果我們想要讓圖像向左移動(dòng)50像素，我們可以這樣寫(xiě)：

img {
  transform: translateX(-50px);
}

上述代碼中，img表示我們要移動(dòng)的圖像。transform: translateX(-50px)表示我們要將圖像向左移動(dòng)50像素。

我們也可以通過(guò)動(dòng)畫(huà)來(lái)讓圖像更平滑地移動(dòng)，使用@keyframes來(lái)創(chuàng)建一個(gè)動(dòng)畫(huà)：

@keyframes left-move {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50px); }
}
img {
  animation: left-move 2s linear;
}

上述代碼中，我們創(chuàng)建了一個(gè)名為left-move的動(dòng)畫(huà)，該動(dòng)畫(huà)會(huì)將圖像從原始位置移動(dòng)到向左50像素的位置，我們將這個(gè)動(dòng)畫(huà)應(yīng)用到了圖像上，并設(shè)置了動(dòng)畫(huà)的持續(xù)時(shí)間為2秒，以及動(dòng)畫(huà)的速度為線(xiàn)性。

這樣，圖像就會(huì)按照我們?cè)O(shè)定的動(dòng)畫(huà)效果來(lái)移動(dòng)了。