用CSS实现上下浮动动画效果，让网页元素动起来

你有没有注意到，很多网站上的小图标、提示气泡或者悬浮按钮会轻轻上下浮动？这种微交互虽然不起眼，却能让页面显得更生动。其实，这种效果用CSS就能轻松实现，不需要JavaScript。

基本原理：利用@keyframes定义动画

CSS的@keyframes规则可以用来定义动画的关键帧。要做出上下浮动的效果，只需要让元素在一定时间内上下移动一点点距离。

<style>
.float-animation {
  animation: float 2s ease-in-out infinite;
}

@keyframes float {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}
</style>

<div class="float-animation">我会上下浮动</div>

上面这段代码中，animation: float 2s ease-in-out infinite; 表示使用名为float的动画，持续2秒，缓动效果，并无限循环。关键帧里从原位置上移-10px再回到原位，就形成了“漂浮”的视觉感。

调整参数让效果更自然

实际使用时可以根据需要调节动画时长和移动距离。比如想让一个购物车图标微微晃动，可以缩短时间、减小位移：

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

把动画时间设为1.5秒，看起来会更轻快。同时搭配ease-in-out曲线，动作就不会生硬，像被水托着一样自然起伏。

应用场景举例

常见的用法包括：APP下载引导页中的手机图标、后台系统里的“新消息”提示角标、电商网站的“立即购买”悬浮按钮。这些地方加一点浮动动画，能有效吸引用户注意力。

还可以给多个元素设置不同延迟，制造错落起伏的效果，比如一组星星闪烁：

.star {
  display: inline-block;
  animation: float 1.8s ease-in-out infinite;
}

.star:nth-child(2) {
  animation-delay: 0.2s;
}

.star:nth-child(3) {
  animation-delay: 0.4s;
}

这样一来，三个星星依次起伏，就像真的在夜空中飘动一样。

这个技巧简单实用，适合刚入门前端的朋友练手。下次做页面时，不妨给某个元素加上浮动动画，瞬间提升整体质感。