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

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

P粉602998670

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

原创

847人浏览过

使用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 让运动更自然。

卡拉OK视频制作

卡拉OK视频制作，在几分钟内制作出你的卡拉OK视频

178

查看详情

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