CSS3動畫-箭頭

.arrow {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid #f00;
animation: arrow 2s ease-in-out infinite;
}
@keyframes arrow {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-20px);
}
100% {
transform: translateY(0);
}
}

CSS3動畫不僅可以為網站添加生動的效果，同時也能增加用戶交互體驗。本文介紹的CSS3動畫-箭頭，是一種常用的網站元素效果。箭頭通常用于指示用戶往哪里前進，有時還可用于表現某個元素的狀態。

這個箭頭的實現方式如下：

箭頭元素使用三邊缺口的邊框，由于第一條邊和第二條邊都是透明，因此箭頭的左右兩側看起來是平滑的弧形。箭頭底部邊框使用了紅色，這可以被替換為其他顏色。

此外，這個箭頭使用CSS3動畫來制作動態效果。這是在CSS3版本之前不可能實現的。本例中的動畫使用了keyframes。我們在這里指定了箭頭動畫的3個不同狀態（0％，50％和100％）以及其對應的變換值。在動畫聲明中，我們告訴瀏覽器這個動畫將持續2秒，并重復無限次，使用ease-in-out的動畫緩和函數。

當你在網頁上使用箭頭圖標時，這個動畫使它更有趣、更有吸引力，更能吸引用戶的目光。