CSS实现鼠标上移图标旋转效果

当鼠标悬停在图标上时，可以通过CSS动画将其旋转，从而增加网站的视觉效果和用户交互性。

当鼠标悬停在图标上时，可以通过CSS动画将其旋转，从而增加网站的视觉效果和用户交互性。

实现该效果的步骤如下：

第一步：准备HTML代码

在HTML文件中添加一个带有类名的标签，该类名是为了在CSS中选择图标元素进行样式修改。

例如，在HTML文件中添加一个带有类名 "icon" 的 <i> 元素，将其设置为 "font-awesome" 字体库中的 "fa-star" 图标：

<i class="fa fa-star icon"></i>

第二步：添加CSS样式

在CSS文件中为 "icon" 类添加样式，包括设置元素的基本样式以及添加鼠标悬停时的旋转动画。

设定基础样式

.icon {
  /* 将元素设置为 inline-block，使其在默认情况下具有宽度和高度 */
  display: inline-block;

  /* 定义元素的大小和宽高比 */
  font-size: 30px;
  width: 30px;
  height: 30px;
  line-height: 30px;
}

注意，应该将元素设置为 display: inline-block，因为 inline 元素无法定义宽度和高度。

添加旋转动画

添加鼠标悬停时的旋转动画，可以使用CSS3中的 transform 属性和 transition 属性。

首先，定义元素被旋转的初始状态，即当鼠标没有悬停在元素上时：

.icon {
  /* 省略了基础样式 */

  /* 定义默认状态下的旋转角度和变形原点 */
  transform: rotate(0.3turn);  /* 旋转 108 度 */
  transform-origin: center;  /* 以元素中心为旋转原点 */

  /* 定义过渡效果，使旋转运动更加平稳 */
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

在这里，我们定义了元素的初始状态为旋转 108 度（即 0.3 圆），并且以元素中心为旋转原点。除此之外，我们还定义了过渡效果，使得旋转更加平稳。

接下来，我们需要定义元素在鼠标悬停时的状态：

.icon:hover {
  /* 省略了基础样式 */

  /* 定义鼠标悬停状态下的旋转角度和变形原点 */
  transform: rotate(1turn);  /* 旋转 360 度 */
  transform-origin: center;  /* 以元素中心为旋转原点 */
}

在这里，我们定义了元素的鼠标悬停状态为旋转 360 度（即 1 圆），并且以元素中心为旋转原点。

现在，我们已经成功地实现了鼠标悬停时图标旋转的效果。

第三步：示例

下面是一个使用 Font Awesome 图标库的示例：

<i class="fa fa-star icon"></i>

在 icon 类中添加 CSS 样式，如上所述。

除了 Font Awesome 图标库之外，还可以使用纯 CSS 来实现一些基本的旋转图标。例如，下面的代码段定义了一个简单的旋转箭头图标：

<i class="icon"></i>

.icon {
  /* 将元素设置为 inline-block，使其在默认情况下具有宽度和高度 */
  display: inline-block;
  /* 定义元素的大小和宽高比 */
  font-size: 0;
  width: 20px;
  height: 20px;
  border-top: 2px solid black;
  border-right: 2px solid black;
  transform: rotate(45deg);
  transform-origin: center;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.icon:hover {
  transform: rotate(225deg);
}

注意，这个示例使用了 CSS3 中的旋转、边框和动画属性。

总之，以上就是制作鼠标悬停时图标旋转效果的完整攻略，包括基础样式和鼠标悬停时样式的设置。