CSS3運(yùn)動(dòng)路徑（path）是一個(gè)非常實(shí)用的動(dòng)畫效果，可以讓元素沿著自定義的路徑運(yùn)動(dòng)，讓網(wǎng)頁(yè)更加生動(dòng)有趣。接下來我們來學(xué)習(xí)一下關(guān)于CSS3運(yùn)動(dòng)路徑的應(yīng)用。

首先，我們需要在HTML文檔中設(shè)置一個(gè)元素，比如一個(gè)div：

<div class="box"></div>

接下來，在CSS中為這個(gè)元素設(shè)置樣式，用transform: translate()屬性來移動(dòng)元素，用animation來添加動(dòng)畫效果：

.box {
width: 50px;
height: 50px;
background-color: blue;
position: absolute;
animation: move 2s linear infinite;
}
@keyframes move {
100% {
transform: translateX(500px);
}
}

上面的代碼會(huì)讓元素沿著X軸方向移動(dòng)500像素。但是如果我們想讓元素沿著一條曲線移動(dòng)，就需要使用運(yùn)動(dòng)路徑path了。先定義一個(gè)路徑，比如一個(gè)SVG路徑：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<path id="curve" d="M 100 200 Q 200 100 300 200" />
</svg>

其中，M表示移動(dòng)到（move to）路徑起點(diǎn)，第一個(gè)數(shù)字表示起點(diǎn)的x坐標(biāo)，第二個(gè)數(shù)字表示起點(diǎn)的y坐標(biāo)；Q表示二次貝塞爾曲線，中間的數(shù)字表示控制點(diǎn)的坐標(biāo)。

然后在CSS中引用這個(gè)路徑，并使元素遵循這個(gè)路徑運(yùn)動(dòng)：

.box {
width: 50px;
height: 50px;
background-color: red;
position: absolute;
animation: pathmove 5s linear infinite;
}
@keyframes pathmove {
0% {
transform: translateX(0) translateY(0);
}
100% {
transform: translateX(200px) translateY(200px);
}
}
.box:hover {
animation-play-state: paused;
}
.path {
animation: pathmove 5s linear infinite;
}
@keyframes pathmove {
0% {
transform: translateX(0) translateY(0);
}
100% {
transform: translateX(200px) translateY(200px);
}
}
.path:hover {
animation-play-state: paused;
}

這樣，我們就實(shí)現(xiàn)了一個(gè)運(yùn)動(dòng)路徑動(dòng)畫效果了。注意，在定義運(yùn)動(dòng)路徑時(shí)，必須使用transform: translate()，而不能使用top、left等屬性。