HTML鼠标悬停箭头翻转动画代码 - 简单实现

.arrow {
  position: relative;
  width: 50px;
  height: 50px;
  cursor: pointer;
}

.arrow span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  background-color: #000;
  transform: translate(-50%, -50%) rotate(45deg);
  transition: transform 0.3s ease;
}

.arrow:hover span {
  transform: translate(-50%, -50%) rotate(225deg);
}

这段代码利用一个 <div> 元素包裹箭头，并使用 <span> 元素来表示箭头形状。通过 CSS 的 position 属性将 <span> 定位到父元素中心，并使用 transform 属性旋转箭头。当鼠标悬停在箭头之上时，hover 伪类改变 <span> 元素的旋转角度，从而实现箭头翻转的效果。