CSS background 悬浮效果：玩转炫酷

2023-09-26 01:08:01

告别单调悬浮，玩转 CSS background 悬浮效果

日常开发中，按钮悬停效果随处可见，实现方法五花八门，伪元素、CSS3 变换、过渡都能实现。今天，我们另辟蹊径，用 background 玩转炫酷悬浮效果。

背景色：悬浮的画笔

背景色是 CSS 中的强大工具，可轻松为元素添加色彩。而我们巧妙利用背景色的过渡，就能实现令人惊叹的悬浮效果。

1. 单色渐变

设置一个背景色渐变，悬浮时改变渐变起始色或终止色，即可实现单色渐变效果。如下例：

.button {
  background: linear-gradient(90deg, #ff0000, #ff0000);
  transition: background 0.3s;
}

.button:hover {
  background: linear-gradient(90deg, #ff0000, #00ff00);
}

2. 多色渐变

使用多色渐变，可实现更丰富的色彩变化。悬浮时，可改变渐变角度、起始色或终止色，打造绚丽效果。如下例：

.button {
  background: linear-gradient(45deg, #ff0000, #00ff00, #0000ff);
  transition: background 0.3s;
}

.button:hover {
  background: linear-gradient(135deg, #ff0000, #00ff00, #0000ff);
}

背景图：悬浮的纹理

除了颜色，背景图也能为悬浮效果增添纹理和趣味。我们可以使用背景图过渡，在悬浮时切换不同的背景图。如下例：

.button {
  background-image: url(button-normal.png);
  transition: background 0.3s;
}

.button:hover {
  background-image: url(button-hover.png);
}

背景尺寸：悬浮的放大缩小

改变背景尺寸，可以实现悬浮时元素的放大缩小效果。如下例：

.button {
  background-image: url(button.png);
  background-size: contain;
  transition: background-size 0.3s;
}

.button:hover {
  background-size: 110%;
}

背景位置：悬浮的移动

改变背景位置，可实现悬浮时元素内背景图的移动效果。如下例：

.button {
  background-image: url(button.png);
  background-repeat: no-repeat;
  background-position: 0 0;
  transition: background-position 0.3s;
}

.button:hover {
  background-position: 0 -100px;
}