CSS3中有一種新特性是可以通過(guò)箭頭線(xiàn)路移動(dòng)的方式來(lái)制作動(dòng)畫(huà)效果。這種動(dòng)畫(huà)效果在網(wǎng)站的設(shè)計(jì)中經(jīng)常被應(yīng)用到導(dǎo)航菜單或輪播圖中，也可以用來(lái)增加頁(yè)面的交互性和趣味性。下面我們來(lái)學(xué)習(xí)一下如何制作這種動(dòng)畫(huà)效果。

.arrow {
position: relative;
animation: move 2s infinite;
}
.arrow:before {
content: "";
position: absolute;
right: -10px;
top: 50%;
transform: translateY(-50%) rotate(45deg);
width: 20px;
height: 20px;
background-color: #000;
}
.arrow:after {
content: "";
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%) rotate(-45deg);
width: 20px;
height: 20px;
background-color: #000;
}
@keyframes move {
0% {
top: 0;
left: 0;
}
50% {
top: 50%;
left: 50%;
}
100% {
top: 100%;
left: 100%;
}
}

這里我們先定義一個(gè).arrow的class用來(lái)表示箭頭。同時(shí)我們?cè)O(shè)置了position: relative來(lái)使箭頭可以相對(duì)于父元素進(jìn)行絕對(duì)定位。接下來(lái)我們?cè)?arrow中通過(guò)偽元素:before和:after來(lái)分別設(shè)置箭頭頭部和箭頭尾部的樣式。

在.arrow:before中，我們?cè)O(shè)置了transform: translateY(-50%) rotate(45deg)使箭頭頭部可以以自身中心進(jìn)行旋轉(zhuǎn)45度。同理，在.arrow:after中，我們使用了transform: translateY(-50%) rotate(-45deg)來(lái)使箭頭尾部旋轉(zhuǎn)-45度。

@keyframes move {
0% {
top: 0;
left: 0;
}
50% {
top: 50%;
left: 50%;
}
100% {
top: 100%;
left: 100%;
}
}

最后我們通過(guò)@keyframes來(lái)定義移動(dòng)動(dòng)畫(huà)效果。在0%時(shí)，箭頭位于坐標(biāo)(0,0)的位置，50%時(shí)，箭頭位于坐標(biāo)(50%,50%)的位置，100%時(shí)，箭頭到達(dá)目標(biāo)位置坐標(biāo)(100%,100%)。我們還設(shè)置了infinite屬性使動(dòng)畫(huà)效果可以無(wú)限循環(huán)播放。

通過(guò)這樣的設(shè)置，我們可以輕松地制作出一個(gè)動(dòng)態(tài)的箭頭線(xiàn)路移動(dòng)效果。在實(shí)際應(yīng)用中，我們可以根據(jù)具體情況對(duì)樣式進(jìn)行一定的調(diào)整，以達(dá)到更好的效果和體驗(yàn)。