如何通过css animation制作悬停按钮特效-css教程-PHP中文网

如何通过css animation制作悬停按钮特效

P粉602998670

发布： 2025-10-08 21:43:01

原创

809人浏览过

答案：通过CSS的animation和:hover伪类可实现悬停按钮特效。首先创建按钮HTML结构，接着设置背景色、圆角、阴影等基础样式并添加transition过渡效果；然后使用@keyframes定义动画关键帧，如背景移动或缩放效果；在:hover中调用animation属性触发动画，可结合box-shadow、text-shadow等增强视觉反馈。最终实现平滑且富有交互感的悬停特效，关键在于合理控制动画时长与状态衔接。

如何通过css animation制作悬停按钮特效

制作悬停按钮特效可以通过 CSS 的 animation 和 :hover 伪类实现，让按钮在鼠标移上时产生动态视觉效果。核心思路是定义动画关键帧，并在悬停时触发动画或过渡效果。

1. 基础按钮结构

先创建一个简单的按钮 HTML 结构：

2. 添加基础样式

给按钮设置基本样式，包括颜色、圆角、阴影等，提升视觉表现：

.hover-btn {
  background: #007bff;
  color: white;
  border: none;
  padding: 12px 24px;
  font-size: 16px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
}

3. 使用 @keyframes 定义动画

通过 @keyframes 创建自定义动画，比如从背景色渐变到另一种颜色：

立即学习“前端免费学习笔记（深入）”；

@keyframes slide-bg {
0% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }
}

也可以做缩放动画：

AI Sofiya

一款AI驱动的多功能工具

109

查看详情

@keyframes scale-up {
from { transform: scale(1); }
to { transform: scale(1.1); }
}

4. 在 :hover 中应用动画

当鼠标悬停时启动动画，比如使用背景移动效果：

.hover-btn:hover {
  background: linear-gradient(90deg, #007bff, #00d4ff, #007bff);
  background-size: 200% 100%;
  animation: slide-bg 1.5s infinite;
}

或者添加轻微放大效果：

.hover-btn:hover {
animation: scale-up 0.3s forwards;
}