Hover.css -岩石教程

特点

多种悬停效果：包括翻转、缩放、淡入淡出、阴影、背景变化等多种效果。
易于集成：只需在 HTML 元素上添加类名即可应用效果。
响应式设计：所有效果都支持响应式设计，适用于不同屏幕尺寸。
轻量级：文件体积小，不会显著增加页面加载时间。
跨浏览器兼容：在现代浏览器中均能良好运行。

使用场景

按钮和链接：为按钮和链接添加悬停效果，提升用户交互体验。
图片和卡片：在图片和卡片上添加悬停效果，增强视觉吸引力。
导航菜单：为导航菜单项添加悬停效果，使导航更加生动。
标识和图标：在标识和图标上添加悬停效果，突出显示重要元素。

安装方式

通过 CDN 引入

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/hover.css/2.3.1/css/hover-min.css">

下载并引入

从 Hover.css GitHub 下载库文件。
将文件放入项目中并在 HTML 中引入。

<link rel="stylesheet" href="path/to/hover-min.css">

使用示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hover.css Demo</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/hover.css/2.3.1/css/hover-min.css">
</head>
<body>
  <button class="hvr-grow">Hover Me</button>
</body>
</html>

在这个示例中，我们为按钮添加了 hvr-grow 悬停效果，当用户将鼠标悬停在按钮上时，按钮会放大。

常用 API 介绍

Hover.css 的使用主要通过添加预定义的类名来实现。以下是一些常用的悬停效果类名：

2D 转换：
- hvr-grow：放大元素。
- hvr-shrink：缩小元素。
- hvr-pulse：元素轻微脉动。
背景和边框：
- hvr-fade：背景颜色淡出。
- hvr-sweep-to-right：背景颜色向右扫动。
- hvr-border-fade：边框颜色淡出。
阴影和光泽：
- hvr-shadow：添加阴影效果。
- hvr-glow：元素发光。
浮动和倾斜：
- hvr-float：元素浮动。
- hvr-tilt：元素轻微倾斜。

自定义动画属性

可以通过 CSS 自定义悬停效果的持续时间、延迟和其他属性。例如：

.hvr-custom {
  transition-duration: 1s;
  transition-timing-function: ease-in-out;
}

在 HTML 中使用自定义类：

<button class="hvr-grow hvr-custom">Custom Hover</button>

Hover.css

特点

使用场景

安装方式

通过 CDN 引入

下载并引入

使用示例

常用 API 介绍

自定义动画属性

官方资料