CSS3是一種常用的設(shè)計(jì)網(wǎng)頁(yè)的語(yǔ)言，能夠給網(wǎng)頁(yè)帶來(lái)美觀和流動(dòng)感。其中一種特別受歡迎的效果就是箭頭跳動(dòng)，它可以讓網(wǎng)頁(yè)更加生動(dòng)有趣。

.arrow {
width: 0;
height: 0;
border-top: 30px solid transparent;
border-left: 30px solid red;
border-bottom: 30px solid transparent;
position: relative;
animation: jump 1s infinite;
transform-origin: 100% 50%;
}
@keyframes jump {
0% {
transform: translate(0, 0) rotate(0deg);
}
50% {
transform: translate(60px, -60px) rotate(45deg);
}
100% {
transform: translate(0, 0) rotate(0deg);
}
}

在這段代碼中，我們創(chuàng)建了一個(gè)箭頭形狀的類樣式，它定義了箭頭的寬度、高度和邊框樣式。通過(guò)設(shè)置position屬性為relative，使得動(dòng)畫對(duì)于其他元素的位置進(jìn)行相對(duì)定位。我們還通過(guò)animation屬性定義了一個(gè)跳動(dòng)的動(dòng)畫效果，并通過(guò)transform-origin屬性來(lái)設(shè)置transform屬性的變化起點(diǎn)。最終的效果是一個(gè)跳躍的箭頭，讓網(wǎng)頁(yè)看起來(lái)更加生動(dòng)有趣。