使用纯css制作带阴影起伏的悬浮卡片动画，核心在于利用 @keyframes 定义关键帧，通过同时改变 transform: translatey() 和 box-shadow 属性来实现视觉上的升降效果。当卡片向上移动时，阴影范围扩大且透明度降低；向下移动时，阴影收缩且变深。只需将动画应用于容器或卡片本身，并设置 infinite 循环即可实现持续的悬浮感。
如何调整悬浮的高度和阴影强度？
调整悬浮高度主要修改 translateY 的负值幅度，而阴影强度则通过 box-shadow 的模糊半径（blur radius）和颜色透明度来控制。较大的负值产生更高的悬浮感，较大的模糊半径模拟更远的距离。通常建议保持 box-shadow 的颜色与卡片背景色一致但透明度更低，以增强真实感。
.card {
width: 200px;
height: 200px;
background: #fff;
border-radius: 12px;
animation: float 3s ease-in-out infinite;
}
@keyframes float {
0%, 100% {
transform: translateY(0);
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
50% {
transform: translateY(-20px);
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}
}
上述代码中，translateY(-20px) 使卡片向上浮动20像素，同时阴影从 0 5px 15px 变为 0 20px 40px，模糊半径增大，颜色透明度降低，模拟光线随距离变化的物理现象。
如何实现多卡片的错开悬浮效果？
要实现多个卡片错开悬浮，需为每个卡片设置不同的 animation-delay 和 animation-duration。通过随机化这些时间参数，可以避免所有卡片同步运动，从而产生自然、有机的群体悬浮效果。这种技巧常用于展示网格或列表项的动态交互。
.card:nth-child(1) { animation-delay: 0s; }
.card:nth-child(2) { animation-delay: -1s; }
.card:nth-child(3) { animation-delay: -2s; }
通过负延迟值，可以让动画在页面加载时即处于不同阶段，避免初始同步。结合不同的 duration，如 3s、3.5s、4s，可进一步增加运动的随机性和自然度。
阴影变化与位移速度的匹配问题是什么？
若阴影变化与位移速度不匹配，会导致视觉上的“脱节”感，例如卡片已上升但阴影仍紧贴底部。解决此问题需确保 box-shadow 的变化曲线与 transform 同步。通常使用 ease-in-out 缓动函数，并在关键帧中精确对应位置与阴影参数。若发现不同步，可微调关键帧百分比或改用 cubic-bezier 自定义曲线以优化过渡平滑度。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
