通过background-position或伪元素位移实现渐变动画。1. 设置background-size为200%并用animation改变background-position，使渐变滑动；2. 用@keyframes在关键帧中切换linear-gradient角度模拟旋转；3. 推荐使用::before伪元素承载渐变背景，通过left位移创建“扫光”效果，配合overflow:hidden实现高性能流动动画，视觉表现更佳且兼容性好。
想让按钮背景动起来，用 linear-gradient 搭配 @keyframes 是个很酷的方式。关键在于不能直接对 background-image 做动画，而是通过移动渐变背景的位置或改变其角度来实现动态效果。
1. 使用 background-position 实现滑动渐变
设置一个线性渐变背景，并通过改变 background-position 让它在按钮上来回滑动。
.animated-button {
padding: 12px 24px;
color: white;
border: none;
background: linear-gradient(90deg, #ff7e5f, #feb47b, #ff7e5f);
background-size: 200% 100%;
cursor: pointer;
transition: 0.3s;
}
.animated-button:hover {
animation: slideGradient 2s ease-in-out infinite;
}
@keyframes slideGradient {
0% {
background-position: 0% 50%;
}
100% {
background-position: 100% 50%;
}
}
说明： 这里将 background-size 设为 200%，使渐变拉宽一倍，再通过 background-position 从左到右移动，形成“流动”感。
2. 使用 background-image 改变渐变角度
也可以让渐变的角度旋转起来，制造更炫的效果。
立即学习“前端免费学习笔记（深入）”；
.rotate-button {
padding: 12px 24px;
color: white;
border: none;
background: linear-gradient(45deg, #6a11cb, #2575fc);
background-size: 200% 200%;
cursor: pointer;
}
.rotate-button:hover {
animation: rotateGradient 3s linear infinite;
}
@keyframes rotateGradient {
0% {
background: linear-gradient(45deg, #6a11cb, #2575fc);
}
25% {
background: linear-gradient(90deg, #6a11cb, #2575fc);
}
50% {
background: linear-gradient(135deg, #6a11cb, #2575fc);
}
75% {
background: linear-gradient(180deg, #6a11cb, #2575fc);
}
100% {
background: linear-gradient(45deg, #6a11cb, #2575fc);
}
}
注意： 直接动画 background-image 不被大多数浏览器支持，但你可以用 animation 在关键帧中显式更换不同角度的 linear-gradient 来模拟旋转效果。
3. 推荐做法：伪元素 + 位移动画
更高效、兼容性更好的方式是使用伪元素承载渐变背景，再控制它的位置。
.fancy-button {
position: relative;
padding: 12px 24px;
color: white;
background: transparent;
border: 2px solid currentColor;
overflow: hidden;
z-index: 1;
}
.fancy-button::before {
content: '';
position: absolute;
top: 0; left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, #00bfa5, transparent);
transition: 0.5s;
z-index: -1;
}
.fancy-button:hover::before {
animation: shine 1.5s ease-in-out infinite;
}
@keyframes shine {
0% { left: -100%; }
100% { left: 100%; }
}
优势： 利用伪元素实现“扫光”或“流动”效果，性能好，视觉冲击强，适合现代设计风格。
基本上就这些。掌握 background-position、background-size 和 @keyframes 的配合，就能做出各种炫酷的渐变动画按钮。不复杂但容易忽略细节，比如渐变尺寸和定位的协调。多试几次，效果自然出来。
