在CSS中，我們可以利用動畫效果使頁面中的元素移動起來。本文將介紹如何使用CSS實現圖片按照矩形移動。

.rect {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
border: 2px solid black;
animation-name: move-rect;
animation-duration: 5s;
animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
animation-iteration-count: infinite;
}
@keyframes move-rect {
0% {
transform: translate(-50%, -50%);
}
25% {
transform: translate(-50%, calc(-50% + 150px));
}
50% {
transform: translate(calc(-50% + 200px), calc(-50% + 150px));
}
75% {
transform: translate(calc(-50% + 200px), -50%);
}
100% {
transform: translate(-50%, -50%);
}
}

以上代碼定義了一個矩形，寬度和高度都為200px，以及一些基本的樣式。利用animation屬性，我們?yōu)榫匦翁砑恿艘粋€名為move-rect的動畫。動畫持續(xù)時間為5秒，并在無限次數內播放。

關鍵幀的定義說明了矩形的移動路徑。在0%處，矩形位于中心。在25%處，矩形移動到了中心下方的位置。在50%處，矩形位于右上角。在75%處，矩形回到了中心下方的位置。在100%處，矩形回到了初始位置。

使用CSS實現圖片按照矩形移動可以為網站增加一些動態(tài)效果，使得網站更加有趣。當然，我們也可以通過改變關鍵幀的定義，創(chuàng)造出更加復雜的移動路徑。