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

.arrow-wrapper {
  position: relative;
  width: 50px;
  height: 50px;
}

.arrow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 10px 20px 10px;
  border-color: transparent transparent #fff transparent;
  transform: translate(-50%, -50%) rotate(0deg);
  transition: transform 0.3s ease-in-out;
}

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

解释：

• '.arrow-wrapper' 是一个容器，用来包含箭头。
• '.arrow' 是一个用 border 画出来的箭头。
• 初始状态下，箭头是指向上的，也就是'rotate(0deg)'。
• 当鼠标划过 '.arrow-wrapper' 时，'.arrow' 的 transform 属性会从初始状态变为 'rotate(180deg)'，即箭头翻转 180 度。