CSS 实现漂亮的鼠标悬停效果

CSS Filter 是一种 CSS 功能，可让您获得模糊和颜色调整等图形效果

只需指定您要应用的CSS属性filter的类型。例如，如果指定以下内容，则 HTML 元素将显示应用的效果。

使用亮度的表现

brightness()我们使用亮度调节方法。要使鼠标悬停在照片上时显得更亮，:hover只需为正常时间和时间设置不同的滤镜值，并使用 CSS Transition 添加动画即可。

.effect-brightness {
  transition: filter 0.3s ease;
  filter: brightness(
    1
  ); /* 因为是默认值，所以可以省略这一行 */
}

.effect-brightness:hover {
  filter: brightness(1.75); /* 添加亮度 */
}

动画.gif

使用亮度的表现（闪烁）

您只需更改 CSS 过渡即可创建各种变体。通过添加将鼠标悬停在其上方时瞬间闪烁的表情，可以给人一种轻快运动的印象。通过添加边框，可以给人留下鲜明的印象。

transition生产的技巧是为正常时间和悬停时间指定不同的属性。

.effect-flash {
  border: 1px solid rgba(255, 255, 255, 0%); 

  filter: brightness(1.0);
  transition: filter 1s, border-color 1s ; 
}

.effect-flash:hover {
  border: 1px solid rgba(255, 255, 255, 100%); 
  transition: border-color 0.2s;

  animation: bright-flash 0.2s linear forwards;  /* CSS Animation 动画。最后维持最终态 */
}

@keyframes bright-flash {
  0% {
    filter: brightness(2.5);
  }

  100% {
    filter: brightness(1.25);
  }
}

动画1.gif

使用饱和度

一种将正常状态设置为单色并在鼠标悬停时取消单色的技术。通过将其设为单色，您可以用它来表达整体优雅的设计。这种表达对于化妆品和服装等品牌广告网站非常有用。

.effect-mono {
  filter: grayscale(100); 
  transition: filter 0.2s;
}

.effect-mono:hover {
  filter: grayscale(0); 
}

动画2.gif

使用亮度的表现（最适合按钮）

brightness()此表达式非常适合具有多态设计的按钮。光滑的设计与亮度的变化相得益彰，单个按钮图像营造出漂亮的效果。即使设计者只提供普通的按钮图像，它也很有用，因为它很容易设置。

.btn {
  filter: brightness(1);
  transition: filter 0.3s;
}

.btn:hover {
  filter: brightness(1.15);
}

.btn:active {
  filter: brightness(0.85);
}

动画3.gif

使用模糊的表现

一种当鼠标悬停时显示附加信息的技术。

.effect-blur-thumb {
  transition: all 0.3s ease;
  width: 100%;
}

.effect-blur:hover .effect-blur-thumb {
  /* 悬停时调整亮度 */
  filter: blur(8px) brightness(1.5);
  transform: scale(1.1);
}

动画4.gif