HTML 箭头翻转效果：鼠标悬停动画代码示例

.arrow-container {
  display: inline-block;
  position: relative;
}

.arrow {
  display: inline-block;
  transition: transform 0.3s;
}

.arrow-container:hover .arrow {
  transform: rotate(180deg);
}

const arrowContainer = document.querySelector('.arrow-container');
const arrow = document.querySelector('.arrow');

arrowContainer.addEventListener('mouseenter', () => {
  arrow.style.transform = 'rotate(180deg)';
});

arrowContainer.addEventListener('mouseleave', () => {
  arrow.style.transform = 'rotate(0deg)';
});

这段代码将创建一个包含箭头的 div，当鼠标悬停在 div 上时，箭头将以 180 度旋转。JavaScript 代码是可选的，如果使用，它将为鼠标进入和离开事件添加动画效果。