使用@keyframes定义float动画，通过transform: translatey实现上下位移，并结合rotate和box-shadow增强立体感，再将animation应用于.card元素，设置3s周期、ease-in-out缓动及infinite循环，使卡片呈现自然浮动效果。

要实现卡片的浮动效果，可以使用CSS中的 @keyframes 定义动画关键帧，结合 transform: translateY 来控制垂直方向的位移，再通过 animation 属性应用到卡片元素上。这种效果常用于提升页面的视觉吸引力，比如在产品展示或人物卡片中。

定义 @keyframes 动画

使用 @keyframes 创建一个上下浮动的动画，通过改变 transform: translateY 的值来模拟漂浮感。

HTML5日本动画动漫网站模板

HTML5日本动画动漫网站模板是一款适合提供各种不同的日本动漫或动画网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

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

• 加入 rotate() 增加轻微晃动感
• 配合 box-shadow 模拟高度变化带来的投影差异
• 使用 rgba 颜色让阴影更柔和

基本上就这些。合理调整位移幅度和动画节奏，就能做出既显眼又不突兀的浮动卡片效果。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！