使用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格式素材。
0 查看详情 .card { width: 200px; height: 200px; background: #fff; border-radius: 12px; display: flex; align-items: center; justify-content: center; animation: float 3s ease-in-out infinite;}
3. 提升真实感的小技巧
让多个卡片浮动节奏不一致，看起来更生动：
立即学习“前端免费学习笔记（深入）”；
给不同卡片设置不同的 animation-delay 微调 animation-duration 避免完全同步 加入轻微旋转：transform: translateY(-10px) rotate(2deg); 使用 cubic-bezier(0.25, 0.45, 0.45, 0.95) 自定义缓动曲线更柔和基本上就这些。控制好位移幅度（建议 -10px 到 0px）、阴影层次和动画时长（2s–4s），就能做出细腻的浮动效果。
以上就是如何通过css animation制作卡片浮动动画的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1029534.html
微信扫一扫 
支付宝扫一扫 
