使用CSS实现卡片渐变动画需结合linear-gradient与@keyframes。1. 定义@keyframes gradientShift改变background-position实现流动效果；2. 为.card设置background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab)，background-size: 400% 400%，并应用animation: gradientShift 5s ease infinite；3. 可选旋转渐变角度，推荐用background-image和background-position确保兼容性。最终实现纯CSS驱动的平滑渐变背景动画，适用于登录页或展示模块。
想要用CSS实现卡片背景的渐变动画，可以结合 background: linear-gradient 与 @keyframes 来完成平滑过渡的动态效果。这种方法无需JavaScript，纯CSS即可让背景色彩流动起来。
1. 定义渐变背景动画 @keyframes
使用 @keyframes 创建一个关键帧动画，改变 background-position 或直接切换 linear-gradient 的颜色角度/位置，从而产生流动感。
@keyframes gradientShift {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}这个动画会让渐变背景在水平方向来回移动，形成色彩流动的效果。
立即学习“前端免费学习笔记（深入）”；
2. 应用渐变背景到卡片
给卡片元素设置一个多重渐变背景，并启用动画。
.card {
width: 300px;
height: 200px;
border-radius: 16px;
padding: 20px;
color: white;
font-size: 1.5em;
text-align: center;
<p>/<em> 设置渐变背景 </em>/
background: linear-gradient(
-45deg,</p><h1>ee7752,</h1><pre class="brush:php;toolbar:false;">#e73c7e,
#23a6d5,
#23d5ab); background-size: 400% 400%; / 扩大背景区域，使动画更平滑 /
/ 启用动画 / animation: gradientShift 5s ease infinite; }
注意： background-size: 400% 400% 是为了让渐变超出元素范围，这样 background-position 动画才能有空间移动，产生流畅过渡。
3. 可选：仅改变渐变角度实现旋转效果
如果你想让渐变“旋转”，可以动画化 linear-gradient 的角度。
@keyframes rotateGradient {
0% {
background: linear-gradient(0deg, #ff9a9e, #fad0c4);
}
100% {
background: linear-gradient(360deg, #ff9a9e, #fad0c4);
}
}⚠️ 注意：直接动画化 background 中的渐变角度 不被所有浏览器支持。更稳妥的做法是使用 background-image 配合 background-position 移动。
完整示例代码
把上面的内容整合成一个可运行的卡片动画：
<div class="card">渐变动效卡片</div>
.card {
width: 300px;
height: 200px;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: gradientShift 5s ease infinite;
}
<p>@keyframes gradientShift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}</p>基本上就这些。通过控制 background-position 和 background-size，配合 @keyframes，就能做出非常自然的渐变动画卡片，适合用于登录页、仪表盘或产品展示模块。
