頁面移動盒子怎么寫css

在CSS中，我們可以使用transition屬性來制作頁面移動盒子的效果，我們需要給盒子一個初始的樣式，然后定義一個過渡效果，***后給盒子一個目標(biāo)樣式。

下面是一個簡單的例子：

HTML代碼：

<div id="box"></div>

CSS代碼：

#box {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  left: 0;
  transition: left 2s;
}
#box:hover {
  left: 200px;
}

在這個例子中，我們給盒子一個初始的樣式，寬度和高度都為100px，背景顏色為紅色，位置相對于其包含塊（即頁面）的左邊距離為0，我們定義一個過渡效果，即left屬性的變化會在2秒內(nèi)完成，我們給盒子一個目標(biāo)樣式，即當(dāng)鼠標(biāo)懸停在盒子上面時，盒子會移動到左邊距離為200px的位置。

這樣，我們就可以通過CSS來制作頁面移動盒子的效果了，這只是一個簡單的例子，實(shí)際的應(yīng)用中可能會更加復(fù)雜，但基本的原理是相同的。