CSS動畫技術(shù)讓我們能夠?qū)崿F(xiàn)各種有趣的效果，其中之一就是讓汽車在瀏覽器頁面上跑動。下面我們就來嘗試實現(xiàn)這個有趣的效果。

/* 設(shè)置汽車的初始樣式 */
.car {
position: absolute;  /* 使汽車能夠在頁面上移動 */
left: -100px;  /* 將汽車移到頁面左側(cè) */
top: 200px;  /* 將汽車放置在頁面中央 */
}
/* 定義汽車跑動的動畫 */
@keyframes run {
from { /* 動畫起始點 */
left: -100px; /* 汽車位置繼續(xù)保持在頁面左側(cè) */
}
to { /* 動畫結(jié)束點 */
left: 100%; /* 汽車會跑到頁面最右側(cè) */
}
}
/* 當(dāng)鼠標(biāo)懸停在汽車上時，停止汽車跑動 */
.car:hover {
animation-play-state: paused;
}
/* 將汽車綁定到跑動動畫上 */
.car {
animation-name: run;
animation-duration: 5s; /* 動畫運(yùn)行時間為5秒 */
animation-timing-function: linear; /* 動畫勻速運(yùn)動 */
animation-iteration-count: infinite; /* 動畫無限循環(huán) */
}

使用以上的代碼，就可以讓一個名叫“car”的元素以勻速在頁面上跑動。通過設(shè)置“animation-play-state: paused;”，我們也可以使得在鼠標(biāo)停留在車上時暫停動畫，從而在口感上讓效果更有趣。

小提示：這里“animation-timing-function”值可以設(shè)置為不同的數(shù)值，例如“ease-in-out”或“cubic-bezier()”等，從而實現(xiàn)不同的運(yùn)動曲線。我們可以根據(jù)實際情況進(jìn)行調(diào)試。