js箭头旋转动画

可以使用CSS3的transform属性来实现箭头旋转动画，具体实现如下：

HTML代码：

<div class="arrow"></div>

CSS代码：

.arrow {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 20px 0 20px 30px;
  border-color: transparent transparent transparent #007bff;
  transition: transform 0.3s ease-in-out;
}

.arrow:hover {
  transform: rotate(90deg);
}

解释：

首先，我们创建了一个宽度为0、高度为0的div元素，并设置了它的边框样式，使其形成一个箭头的形状。箭头的颜色是蓝色的，因为我们设置了右侧边框的颜色为#007bff。

接着，我们使用CSS3的transition属性来为箭头元素设置动画效果。当鼠标悬停在箭头上时，我们使用transform属性将箭头元素旋转90度，从而实现箭头旋转动画的效果。

注意，这里使用的是CSS3的transform属性，因此在一些旧版本的浏览器中可能无法正常显示。如果需要兼容旧版本浏览器，可以考虑使用JavaScript来实现这个效果。