使用CSS的:hover伪类可触发动画效果，通过transition实现颜色、大小等属性的平滑过渡，或结合@keyframes定义复杂动画如旋转。示例中按钮悬停时变色放大，旋转元素仅在悬停时执行动画。需注意避免过度动画影响体验，优化性能并兼顾移动端兼容性，合理运用可提升界面交互性与视觉效果。
当需要在用户交互时触发动画效果，CSS 动画与
:hover
伪类的配合使用非常常见且实用。通过这种方式，可以在鼠标悬停时平滑地展示过渡或动画，提升页面的视觉体验。
基本原理
:hover
是一种伪类，用于定义元素在被鼠标悬停时的样式。结合
@keyframes
定义的动画或
transition
过渡，可以实现丰富的动态效果。
有两种主要方式实现动画与 hover 的配合：
使用
transition
实现属性渐变（适合简单动画）
使用
@keyframes + animation
实现复杂帧动画
使用 transition 配合 hover
这是最常用的方式，适用于颜色、大小、位置等属性的平滑变化。
立即学习
“
前端免费学习笔记（深入）
”；
说明：鼠标悬停时，按钮背景色变深并轻微放大，离开时自动恢复，整个过程由 transition 控制时长和缓动效果。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
使用 @keyframes 动画配合 hover
如果需要更复杂的动画（如旋转、闪烁、路径移动），可以使用 keyframes 定义动画，并在 hover 时触发。
说明：只有当鼠标悬停在元素上时，才开始执行旋转动画，移开后动画停止。
注意事项
为了获得更好的用户体验，需要注意以下几点：
避免在 hover 中使用过于剧烈或长时间的动画，以免干扰用户操作
为动画添加
will-change
或使用
transform
和
opacity
提升性能
考虑移动端无 hover 的情况，确保功能不受影响
可结合
:active
或其他伪类实现更多交互状态
基本上就这些。合理利用 hover 与 CSS 动画的结合，能让界面更生动，同时保持代码简洁高效。
.button {
background-color: #007bff;
padding: 10px 20px;
border-radius: 5px;
color: white;
transition: all 0.3s ease;
}
.button:hover {
background-color: #0056b3;
transform: scale(1.05);
}
.spinner {
width: 50px;
height: 50px;
border: 4px solid #f3f3f3;
border-top: 4px solid #3498db;
border-radius: 50%;
margin: 20px auto;
}
.spinner:hover {
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}