如何通过css animation制作卡片浮动动画-css教程-PHP中文网

如何通过css animation制作卡片浮动动画

P粉602998670

发布： 2025-10-05 19:10:02

原创

857人浏览过

使用CSS @keyframes创建浮动动画，通过transform和box-shadow实现上下移动与阴影变化，配合ease-in-out缓动和适当延迟，使卡片呈现自然漂浮效果。

如何通过css animation制作卡片浮动动画

想让卡片产生自然的浮动效果，可以通过 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格式素材。

查看详情

.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; }