如果想讓網頁效果更炫酷一些，背景色塊的移動是一個不錯的選擇。CSS 提供了幾種方法可以實現背景色塊的移動，下面我們就來一一介紹。

1、使用 transition 實現背景色塊的移動。

代碼如下：

.box1 {
width: 100px;
height: 100px;
background-color: #f00;
transition: transform 1s linear;
cursor: pointer;
}
.box1:hover {
transform: translateX(50px);
}

這個代碼實現了一個紅色背景色塊，當鼠標懸停時，背景色塊向右移動了 50px。

2、使用 keyframes 實現背景色塊的移動。

代碼如下：

.box2 {
width: 100px;
height: 100px;
background-color: #0f0;
animation: move 1s linear infinite alternate;
}
@keyframes move {
0% {
transform: translateX(0);
}
100% {
transform: translateX(50px);
}
}

這個代碼實現了一個綠色背景色塊，它每秒向右移動 50px，然后再回到原位，不停的循環移動。

3、使用 JavaScript 實現背景色塊的移動。

代碼如下：

var box3 = document.getElementById("box3");
var position = 0;
function move() {
position += 10;
box3.style.left = position + "px";
if (position >= 200) {
clearInterval(id);
}
}
var id = setInterval(move, 100);

這個代碼實現了一個藍色背景色塊，它每 100 毫秒向右移動 10px，直到移動到 200px 的位置停止。

以上就是三種實現背景色塊移動的方法，可以根據自己的需求選擇相應的方法進行實現。