CSS3箭頭向下動畫

.arrow-down{
width: 0; 
height: 0; 
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #ff0000;
position: relative;
animation: arrow-down 2s ease-in-out infinite;
}
@keyframes arrow-down {
0% {
top: -20px;
opacity: 0;
}
50% {
opacity: 1;
}
100% {
top: 20px;
opacity: 0;
}
}

CSS3提供了豐富的動畫效果，其中箭頭向下動畫可以增加頁面的互動性和視覺體驗。本文將介紹如何使用CSS3實現箭頭向下動畫。

首先我們需要創建一個三角形箭頭，通過設置其上、左、右的邊框，下面的border-bottom設為0，就可以形成一個三角形。代碼如下：

.arrow-down{
width: 0; 
height: 0; 
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #ff0000;
}

接下來就是實現箭頭向下運動的動畫效果。我們可以通過定義一個名為 arrow-down 的樣式類，給其添加top和opacity屬性，通過設置keyframes，將箭頭的位置從上向下平移，同時opacity從0變為1再從1變為0，就可以實現箭頭向下的視覺效果了。代碼如下：

@keyframes arrow-down {
0% {
top: -20px;
opacity: 0;
}
50% {
opacity: 1;
}
100% {
top: 20px;
opacity: 0;
}
}

最后將兩部分代碼合并，使用animation屬性，將箭頭在2s內按照ease-in-out的緩動函數來執行arrow-down動畫，并循環執行。代碼如下：

.arrow-down{
width: 0; 
height: 0; 
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #ff0000;
position: relative;
animation: arrow-down 2s ease-in-out infinite;
}
@keyframes arrow-down {
0% {
top: -20px;
opacity: 0;
}
50% {
opacity: 1;
}
100% {
top: 20px;
opacity: 0;
}
}

現在，我們就可以將這個箭頭向下動畫應用到頁面的某個元素上，讓頁面更具有趣味性、動感和吸引力了。