CSS3可以通過(guò)動(dòng)畫(huà)效果讓圖片產(chǎn)生移動(dòng)的效果。下面是一個(gè)簡(jiǎn)單的例子：

<style>
img {
position: relative;
left: 0;
transition: left 2s;
}
img:hover {
left: 200px;
}
</style>
<img src="example.jpg">

上述代碼的功能是，當(dāng)鼠標(biāo)懸停在圖片上時(shí)，圖片會(huì)向右移動(dòng)200像素。

解釋一下代碼中的關(guān)鍵部分：

• position: relative使得圖片相對(duì)于其原始位置產(chǎn)生移動(dòng)效果。
• left: 0是圖片的初始位置。
• transition: left 2s表示進(jìn)行l(wèi)eft屬性的變換時(shí)，從初始位置到目標(biāo)位置會(huì)產(chǎn)生2秒的過(guò)渡動(dòng)畫(huà)。
• img:hover表示在鼠標(biāo)懸停在圖片上時(shí)，發(fā)揮下列CSS屬性：
• left: 200px表示將圖片移動(dòng)到右邊200像素的位置。

這只是一個(gè)簡(jiǎn)單的例子，實(shí)際上，通過(guò)CSS3動(dòng)畫(huà)，可以實(shí)現(xiàn)更復(fù)雜的圖片移動(dòng)效果。