通过结合@keyframes、background动画和box-shadow，可创建具有动态视觉效果的CSS卡片。1. 创建基础卡片结构并设置渐变背景与阴影；2. 使用@keyframes定义background-position变化，配合background-size实现背景流动动画；3. 定义shadowPulse动画使阴影强弱交替，增强立体感；4. 可选:hover触发动画或transition实现悬停交互。最终通过组合bgShift与shadowPulse双动画，赋予卡片生动的动态表现，提升UI交互体验。
在CSS中制作带有阴影和背景动画的卡片，可以通过 box-shadow、background 属性与 @keyframes 结合实现动态视觉效果。这种设计常用于提升按钮、卡片、产品展示等UI元素的交互感。
1. 基础卡片结构
先创建一个简单的HTML卡片容器：
动态卡片
悬停时触发阴影与背景动画
对应的CSS基础样式：
立即学习“前端免费学习笔记（深入）”；
.animated-card {
width: 300px;
padding: 20px;
border-radius: 12px;
background: linear-gradient(45deg, #6a11cb, #2575fc);
color: white;
text-align: center;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
transition: all 0.4s ease;
}
2. 使用 @keyframes 定义背景动画
通过关键帧让背景产生流动或颜色渐变移动的效果：
@keyframes bgShift {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
将动画应用到卡片，并设置背景为可移动的渐变：
.animated-card {
background: linear-gradient(45deg, #6a11cb, #2575fc, #6a11cb);
background-size: 300% 300%;
animation: bgShift 4s ease infinite;
}
注意： background-size 大于100%才能看到位置变化；animation 设置 infinite 实现循环。
3. 结合 box-shadow 动画增强立体感
可以单独为阴影定义动画，让卡片看起来“呼吸”或“浮起”：
@keyframes shadowPulse {
0% {
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
50% {
box-shadow: 0 8px 25px rgba(0,0,0,0.2);
}
100% {
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
}
将两个动画同时启用：
.animated-card {
animation:
bgShift 4s ease infinite,
shadowPulse 3s ease-in-out infinite;
}
4. 添加悬停增强交互（可选）
如果只想在鼠标悬停时触发动画，可结合 :hover 使用：
.animated-card:hover {
animation:
bgShift 3s ease infinite,
shadowPulse 2s ease-in-out infinite;
transform: translateY(-5px);
}
或者用 transition 控制 hover 时的平滑变化：
.animated-card {
transition: all 0.3s ease;
}
.animated-card:hover {
box-shadow: 0 12px 30px rgba(0,0,0,0.25);
transform: translateY(-6px);
}
这样既保留了基础动画，又在交互时强化视觉反馈。
基本上就这些。通过组合 @keyframes 控制 background 流动和 box-shadow 强弱变化，能让静态卡片变得生动。关键在于控制动画节奏、颜色协调和性能优化（避免过度重绘）。
