如何在CSS中使用动画制作卡片浮动效果_transform translateY @keyframes配合

P粉602998670 2025-11-26 00:00:00 次阅读

使用@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); } }