使用CSS的@keyframes定义动画关键帧，通过:hover伪类触发，可实现按钮悬停动态效果。例如创建名为hoverPulse的动画，使按钮在悬停时背景色渐变并轻微放大：@keyframes hoverPulse { 0% { background-color: #007bff; transform: scale(1); } 50% { background-color: #0056b3; transform: scale(1.05); } 100% { background-color: #007bff; transform: scale(1); }} 将其应用于按钮的:hover状态，并设置动画时长与缓动函数：.button:hover { animation: hoverPulse 0.6s ease-in-out; } 同时保留基础过渡效果如transition: background-color 0.3s，确保交互流畅。为提升性能可添加will-change: transform，控制动画时长在0.3~0.8秒之间，避免过于突兀，增强用户反馈感。
想让按钮在鼠标悬停时动起来？用CSS的animation配合:hover伪类就能轻松实现。关键在于定义好动画帧和触发时机，不需要JavaScript也能做出流畅的动态效果。
定义CSS动画关键帧
使用@keyframes创建动画流程，控制属性随时间变化。比如做一个颜色渐变加缩放的效果：
@keyframes hoverPulse {
0% {
background-color: #007bff;
transform: scale(1);
}
50% {
background-color: #0056b3;
transform: scale(1.05);
}
100% {
background-color: #007bff;
transform: scale(1);
}
}
在:hover中调用动画
把定义好的动画绑定到按钮的:hover状态。注意设置持续时间和播放方式：
.button {
padding: 12px 24px;
background-color: #007bff;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
transition: background-color 0.3s;
}
.button:hover {
animation: hoverPulse 0.6s ease-in-out;
}
这样鼠标移上按钮就会播放一次脉冲动画。如果希望持续响应，可加上animation-fill-mode: forwards或调整iteration-count。
瞬映
AI 快速创作数字人视频，一站式视频创作平台，让视频创作更简单。
57 查看详情
立即学习“前端免费学习笔记（深入）”；
优化体验的小技巧
动画太突兀会影响使用感，加点细节更自然：
用ease-in-out缓动函数让开始和结束更平滑 动画时长控制在0.3~0.8秒之间，太长会让人等待 搭配transition做基础状态切换，animation只负责复杂动效 考虑添加will-change: transform提升性能
基本上就这些。只要写好关键帧，再通过:hover触发，就能做出吸引人的按钮动画。不复杂但容易忽略的是节奏和反馈感，多试几次找到最合适的效果。
以上就是如何在CSS中实现按钮悬停动画_使用CSS animation在hover伪类触发按钮动态效果的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/949057.html
微信扫一扫 
支付宝扫一扫 
