答案：通过引入Animate.css或自定义关键帧，结合:hover伪类触发动画，可实现按钮上下浮动效果。使用@keyframes定义float动画并应用于.float-button:hover，或直接调用animate__swing等内置类，设置animation-duration和animation-fill-mode以平滑过渡，推荐自定义动画获得更自然的浮动交互效果。

Animate.css 是一个流行的 CSS 动画库，可以快速为元素添加预设的动画效果。要实现按钮的“浮动”效果（比如上下轻微浮动），可以通过组合 Animate.css 提供的类和 :hover 伪类来触发。

1. 引入 Animate.css 库

在使用之前，先在 HTML 文件中引入 Animate.css。可以通过 CDN 引入：

cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">

2. 使用 animate__pulse 或自定义浮动动画

Animate.css 没有直接叫“浮动”的类，但你可以使用类似 animate__pulse、animate__headShake 或结合自定义关键帧实现更自然的上下浮动效果。

如果想实现柔和的上下浮动，推荐使用自定义动画配合 Animate.css 的结构风格。

3. 结合 :hover 触发动画

下面是一个使用自定义“浮动”动画并在鼠标悬停时触发的例子：

JSON Toolkit

JSON文件多功能工具。支持格式化、验证、压缩、键排序及点记法路径查询。零依赖。

下载

@keyframes float { 0% { transform: translateY(0); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0); } } .float-button { display: inline-block; padding: 12px 24px; background-color: #007bff; color: white; border: none; border-radius: 6px; text-decoration: none; font-size: 16px; transition: transform 0.3s ease; } .float-button:hover { animation: float 0.6s ease-in-out; }

说明：

• @keyframes float 定义了一个上下移动的动画。
• animation 在 :hover 中触发，鼠标悬停时播放一次浮动动画。
• 你也可以加上 animation-iteration-count: infinite 实现持续浮动（不推荐用于按钮，容易干扰视觉）。

4. 使用 Animate.css 内置类 + hover（简化方式）

如果你想快速使用内置类，可以在 hover 时动态添加类名（需 JS）或用 CSS 强制覆盖：

.float-button:hover { animation-name: animate__swing; animation-duration: 0.6s; animation-fill-mode: both; }

注意：直接在 hover 中调用 Animate.css 动画需要确保已加载对应类，并且设置 animation-fill-mode: both 保证状态过渡自然。

基本上就这些。用自定义动画控制浮动更灵活，而使用 Animate.css 内置类适合快速原型。关键是结合 :hover 触发 animation 属性，让按钮在交互时生动起来。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！