CSS3動(dòng)畫是一種非常流行和有用的技術(shù)，它可以讓我們?cè)诰W(wǎng)頁(yè)中創(chuàng)建出各種各樣的動(dòng)態(tài)效果。今天，我們來看一下如何使用CSS3動(dòng)畫來模擬一個(gè)人跑步的效果。

.runner {
position: absolute;
top: 200px;
left: 0;
width: 150px;
height: 150px;
background-image: url(runner.png);
background-size: 1500px 150px;
animation: run 1s steps(10) infinite;
}
@keyframes run {
0% {
background-position: 0px 0px;
}
100% {
background-position: -1500px 0px;
}
}

上面的代碼首先創(chuàng)建了一個(gè)包含一個(gè)人物圖片的div，設(shè)置了一些基本的樣式（位置、大小、背景圖片等），然后定義了一個(gè)名為“run”的動(dòng)畫。這個(gè)動(dòng)畫有兩個(gè)關(guān)鍵幀，第一個(gè)關(guān)鍵幀（0%）設(shè)置背景位置為0px 0px，第二個(gè)關(guān)鍵幀（100%）設(shè)置背景位置為-1500px 0px（將整個(gè)圖片向左移動(dòng)了1500像素）。

最后，將這個(gè)動(dòng)畫應(yīng)用到div上，設(shè)置了循環(huán)播放。

現(xiàn)在我們來看一下效果：

看上去不錯(cuò)吧？這只是一個(gè)簡(jiǎn)單的例子，當(dāng)然我們還可以通過一些技巧進(jìn)一步優(yōu)化這個(gè)效果，比如添加緩動(dòng)效果、改變角度、加上陰影等等。希望這篇文章能對(duì)你了解CSS3動(dòng)畫有所幫助！