巧用 CSS 鼠标 Hover 动画，为网页增添灵动魅力

巧用 CSS 鼠标 Hover 动画，为网页增添灵动魅力

在网页设计中，CSS 鼠标 Hover 动画能极大提升用户交互体验。下面就为大家介绍几种常见的 CSS 鼠标 Hover 动画效果。

颜色渐变动画

通过 transition 属性实现颜色渐变，代码如下：

button {
  background-color: blue;
  color: white;
  /* 设置过渡效果，时长 0.3 秒，过渡方式为线性 */
  transition: background-color 0.3s linear;
}

button:hover {
  background-color: red;
}

上述代码中，当鼠标悬停在按钮上时，按钮背景颜色会从蓝色渐变到红色。

缩放动画

使用 transform 属性实现元素缩放，代码示例：

img {
  /* 设置初始缩放比例为 1 */
  transform: scale(1);
  transition: transform 0.3s ease;
}

img:hover {
  /* 鼠标悬停时放大到 1.2 倍 */
  transform: scale(1.2);
}

此代码可让图片在鼠标悬停时放大 1.2 倍。

旋转动画

借助 transform 和 transition 实现旋转效果，代码如下：

.box {
  width: 100px;
  height: 100px;
  background-color: yellow;
  /* 设置旋转原点为中心 */
  transform-origin: center;
  transition: transform 0.5s ease;
}

.box:hover {
  /* 鼠标悬停时旋转 360 度 */
  transform: rotate(360deg);
}

该代码使元素在鼠标悬停时旋转 360 度。

CSS 鼠标 Hover 动画能让网页更具吸引力和交互性。大家可以根据网页风格和需求，选择合适的动画效果，为用户带来更好的浏览体验。不妨在实际项目中多多尝试，发挥创意，打造出独特的网页效果。