CSS3 箭頭晃動是一種常見的網頁動態效果，可以為網頁增添趣味性和活力。實現 CSS3 箭頭晃動需要熟悉 CSS3 的一些選擇器、屬性以及關鍵幀動畫等知識。

.arrow {
position: relative;
display: inline-block;
width: 20px;
height: 20px;
border-top: 10px solid red;
border-right: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid transparent;
animation: shake 0.5s ease-in-out infinite;
}
@keyframes shake {
0% {
transform: rotate(0deg);
}
20% {
transform: rotate(20deg); 
}
40% {
transform: rotate(0deg);
}
60% {
transform: rotate(-20deg);
}
80% {
transform: rotate(0deg);
}
100% {
transform: rotate(0deg);
}
}

代碼解釋：

• 首先創建一個具有箭頭形狀的 div 元素。
• 利用 CSS3 的關鍵幀動畫（@keyframes）創建一個動畫效果。
• 通過 transform 屬性的 rotate() 函數控制箭頭的旋轉程度。
• 在箭頭 div 元素上應用該動畫，并設置 iteration-count 屬性為 infinite，使箭頭持續晃動。

通過以上代碼，我們可以實現一個箭頭晃動的動態效果，為網站增添一份活力。