在网页交互设计中，按钮的浮动效果可以让用户更直观地感知可点击元素，Animate.css作为轻量级的CSS动画库，提供了丰富的预设动画类，结合hover事件可以快速实现按钮浮动效果，不需要开发者手动编写复杂的CSS动画关键帧。
实现前的准备工作
首先需要在项目中引入Animate.css库，有两种常用的引入方式，开发者可以根据项目需求选择：
- 通过CDN引入，直接在HTML的<head>标签中添加对应的link标签
- 下载Animate.css文件到本地，再引入到项目中
如果选择CDN引入，对应的代码示例如下：
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
</head>
选择适合的浮动动画类
Animate.css提供了多个和浮动相关的动画类，常用的有bounce、float、wobble等，其中float类是实现按钮上下浮动效果的最佳选择，它的动画表现是元素匀速上下小幅移动，符合浮动效果的预期。
我们可以直接给按钮添加animate__animated和animate__float两个类，其中animate__animated是Animate.css的基础类，所有动画都需要添加这个类才能生效。
结合hover触发动画
默认情况下，添加动画类后按钮会在页面加载完成后自动执行动画，我们需要通过CSS配置让动画只在hover时触发，核心思路是默认状态下不执行动画，鼠标悬停时添加动画类并配置动画属性。
完整的HTML和CSS代码示例如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>按钮浮动效果示例</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
<style>
/* 按钮基础样式 */
.float-btn {
padding: 12px 24px;
background-color: #409eff;
color: #fff;
border: none;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
/* 默认不执行动画 */
animation: none;
}
/* hover时触发浮动动画 */
.float-btn:hover {
/* 添加Animate.css的浮动动画 */
animation: float 1.5s ease-in-out infinite;
}
/* 定义float动画的关键帧，和Animate.css的float动画保持一致 */
@keyframes float {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
</style>
</head>
<body>
<button class="float-btn">浮动按钮</button>
</body>
</html>
自定义动画参数
如果默认浮动效果不符合需求，我们还可以通过CSS自定义动画的时长、浮动幅度等参数：
- 修改
animation-duration可以调整动画循环的周期，值越大动画越慢 - 修改关键帧中的
translateY值可以调整浮动的幅度，值越大浮动距离越远 - 修改
animation-timing-function可以调整动画的速度曲线，比如改为linear可以让动画匀速执行
自定义动画时长的代码示例如下：
.float-btn:hover {
animation: float 2s linear infinite;
}
注意事项
在使用Animate.css实现hover触发浮动效果时，需要注意以下几点：
- Animate.css 4.x版本的类名都带有
animate__前缀，引入时需要注意类名的正确性 - 如果同时给按钮添加多个动画类，可能会出现动画冲突，建议只保留一个浮动相关的动画类
- 移动端设备上hover事件的表现和PC端不同，如果需要适配移动端，可以结合touch事件调整触发逻辑
Animate.csshover触发CSS动画按钮浮动效果修改时间：2026-07-03 10:27:23