CSS動畫是網頁設計的重要元素之一，提供了一種實現動態效果的方法。今天我將向大家介紹如何使用CSS動畫制作一個簡單的箭頭動畫。 步驟如下： 1. 首先，我們需要在HTML中創建一個箭頭的容器。可以使用div元素并為其添加一個類名，如 "arrow-container"：

<div class="arrow-container">
<div class="arrow"></div>
</div>

2. 接下來，我們將箭頭的樣式定義為CSS類"arrow"：

.arrow {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 50px solid black;
}

3. 然后，我們需要添加CSS動畫，使箭頭在瀏覽器視口內以動畫的形式移動。我們將使用 "transform" 屬性來改變箭頭容器的位置：

.arrow-container {
position: absolute;
top: 50%;
left: -70px;
animation: move-arrow 2s ease-in-out 0s infinite alternate;
}
@keyframes move-arrow {
to {
transform: translateX(150%);
}
}

在上面的代碼中，我們定義了一個名為 "move-arrow" 的動畫，它將箭頭容器移到右側 150% 的位置，循環播放。 4. 最后，我們可以添加一些輕微的變化來使箭頭看起來更生動。比如，將箭頭的顏色在動畫過程中漸變：

.arrow {
...
transition: border-left-color 2s ease-in-out;
}
.arrow-container:hover .arrow {
border-left-color: red;
}

5. 這個簡單的CSS動畫就完成了！運行代碼，您將看到箭頭在瀏覽器視口中不斷移動，并在箭頭上懸浮時會有一個動態顏色變化效果。