使用CSS @keyframes创建浮动动画，通过transform和box-shadow实现上下移动与阴影变化，配合ease-in-out缓动和适当延迟，使卡片呈现自然漂浮效果。
想让卡片产生自然的浮动效果，可以通过 CSS 的 animation 和 @keyframes 实现上下轻微移动并配合阴影变化，模拟出“漂浮”的视觉感受。重点是控制动画的缓动曲线和位移幅度，避免生硬。
1. 基础浮动动画定义
使用 @keyframes 创建一个上下移动的动画，通过 transform: translateY() 控制位移，同时可以调整 box-shadow 模拟深度变化。
@keyframes float { 0% { transform: translateY(0); box-shadow: 0 4px 12px rgba(0,0,0,0.1); } 50% { transform: translateY(-10px); box-shadow: 0 8px 16px rgba(0,0,0,0.15); } 100% { transform: translateY(0); box-shadow: 0 4px 12px rgba(0,0,0,0.1); } }2. 应用到卡片元素
将动画绑定到目标卡片上，设置合适的持续时间、缓动函数和循环模式。推荐使用 ease-in-out 让运动更自然。
卡通风格海洋生物插画集矢量
下载
卡通风格海洋生物插画集矢量适用于平面设计（用在各种平面媒介上，如海报、宣传册、广告、名片等，为设计增添生动有趣的视觉元素）、网页和界面设计（在网站或移动应用的用户界面中，卡通海洋生物的图像可以用来装饰页面）、教育材料（儿童教育图书或互动学习软件）、动画和视频制作（卡通海洋生物的形象可以用于动画制作）等相关设计的AI格式素材。
3. 提升真实感的小技巧
让多个卡片浮动节奏不一致，看起来更生动：
立即学习“前端免费学习笔记（深入）”；
- 给不同卡片设置不同的 animation-delay
- 微调 animation-duration 避免完全同步
- 加入轻微旋转：
transform: translateY(-10px) rotate(2deg); - 使用 cubic-bezier(0.25, 0.45, 0.45, 0.95) 自定义缓动曲线更柔和
