使用@keyframes定义float动画，通过transform: translateY实现上下位移，并结合rotate和box-shadow增强立体感，再将animation应用于.card元素，设置3s周期、ease-in-out缓动及infinite循环，使卡片呈现自然浮动效果。
要实现卡片的浮动效果，可以使用CSS中的 @keyframes 定义动画关键帧，结合 transform: translateY 来控制垂直方向的位移，再通过 animation 属性应用到卡片元素上。这种效果常用于提升页面的视觉吸引力，比如在产品展示或人物卡片中。
定义 @keyframes 动画
使用 @keyframes 创建一个上下浮动的动画，通过改变 transform: translateY 的值来模拟漂浮感。
@keyframes float { 0% { transform: translateY(0); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0); } }将动画应用到卡片
把定义好的动画绑定到目标卡片元素上，设置动画持续时间、缓动函数和循环方式。
.card { width: 200px; height: 200px; background-color: #4CAF50; border-radius: 12px; margin: 50px auto; animation: float 3s ease-in-out infinite; }
- float：对应 @keyframes 定义的动画名称
- 3s：动画周期为3秒
- ease-in-out：先慢后快再慢，使浮动更自然
- infinite：无限循环播放
优化视觉体验的小技巧
为了让浮动效果更真实柔和，可以加入轻微的旋转或阴影变化。
立即学习“前端免费学习笔记（深入）”；
@keyframes float { 0% { transform: translateY(0) rotate(0deg); box-shadow: 0 4px 8px rgba(0,0,0,0.2); } 50% { transform: translateY(-10px) rotate(1deg); box-shadow: 0 6px 12px rgba(0,0,0,0.3); } 100% { transform: translateY(0) rotate(0deg); box-shadow: 0 4px 8px rgba(0,0,0,0.2); } }- 加入 rotate() 增加轻微晃动感
- 配合 box-shadow 模拟高度变化带来的投影差异
- 使用 rgba 颜色让阴影更柔和
