CSS 左右箭頭動畫效果

.arrow{
position: relative; /* 相對定位 */
display: inline-block; /* 行內塊元素 */
width: 50px; /* 箭頭的寬度 */
height: 50px; /* 箭頭的高度 */
cursor: pointer; /* 光標變成手型 */
overflow: hidden; /* 隱藏溢出的內容 */
}
.arrow::before,
.arrow::after{
content: ""; /* 偽元素 */
position: absolute; /* 絕對定位 */
top: 50%; /* 垂直居中 */
transform: translateY(-50%); /* 上下居中 */
width: 20px; /* 箭頭線的寬度 */
height: 3px; /* 箭頭線的高度 */
background-color: #fff; /* 箭頭線的顏色 */
transition: all .3s ease-in-out; /* 過渡效果 */
}
.arrow::before{
left: 5px; /* 左箭頭 */
transform-origin: left; /* 旋轉中心 */
}
.arrow::after{
right: 5px; /* 右箭頭 */
transform-origin: right; /* 旋轉中心 */
}
.arrow:hover::before{
left: 50%; /* 左箭頭移動到中間 */
transform: translate(-50%, -50%) rotate(-45deg); /* 左箭頭旋轉 */
}
.arrow:hover::after{
right: 50%; /* 右箭頭移動到中間 */
transform: translate(50%, -50%) rotate(45deg); /* 右箭頭旋轉 */
}

CSS 左右箭頭動畫效果的實現非常簡單，只需要創建一個包含左右箭頭的元素，然后定義偽元素::before和::after分別代表左右箭頭線。通過偽元素的絕對定位和寬高定義箭頭線的位置和大小，然后通過 CSS3 的transform屬性的rotate()函數實現箭頭的旋轉和移動，最后通過transition屬性實現箭頭過渡效果。當鼠標懸停在包含箭頭的元素上時，箭頭的樣式將會有所變化，從而實現動畫效果。整個過程簡單明了，而且不需要任何 JavaScript 的幫助，極大地提高了網站的響應速度。