如何在网页中实现礼物飞入特效动画

做活动页面时，总想加点热闹气氛。比如用户一打开页面，就有几个小礼物盒从屏幕两边“嗖”地飞进来，落在角落，挺招人喜欢。这种效果其实不难实现，用 CSS 动画就能搞定。

基本思路

让一个代表礼物的元素，初始位置在屏幕外，通过 CSS 的 transform 和 animation，让它在几秒内移动到目标位置，再加点旋转或弹跳效果，看起来就更生动了。

HTML 结构

先写一个简单的盒子代表礼物：

<div class="gift-box">🎁</div>

CSS 动画实现

给这个盒子加上样式和动画：

.gift-box {
  position: fixed;
  left: -100px; /* 起始在屏幕外左侧 */
  bottom: 100px;
  width: 60px;
  height: 60px;
  background: #f8c471;
  border-radius: 10px;
  text-align: center;
  line-height: 60px;
  font-size: 30px;
  animation: flyIn 1.5s ease-out forwards;
}

@keyframes flyIn {
  0% {
    transform: translateX(-100vw) rotate(-20deg);
    opacity: 0;
  }
  80% {
    transform: translateX(20px) rotate(5deg);
  }
  100% {
    transform: translateX(0) rotate(0);
    opacity: 1;
  }
}

这样，页面一加载，礼物就会从左边滑进来，带点旋转收尾，像是轻轻落下来。如果想让多个礼物从不同方向飞入，可以复制多个 gift-box，分别设置 left 或 right，再配不同的延迟：

.gift-box:nth-child(2) {
  animation-delay: 0.5s;
  bottom: 200px;
}

.gift-box:nth-child(3) {
  animation-delay: 1s;
  left: auto;
  right: -100px;
  bottom: 150px;
}

实际应用场景

比如你在做一个双十一促销页，用户进入后，三个小礼物分别从左、右、下方飞入，落定后还可以加个轻微上下晃动的呼吸动画，增加趣味性。这类效果用在 H5 活动页、直播打赏提示、节日祝福页都很合适。

如果不想手写代码，也可以用现成的动画库，比如 Animate.css 配合 JavaScript 控制入场时机，但自己写一段 CSS 更轻量，也不用引入额外文件。

关键是控制好动画时长和缓动函数，太快显得突兀，太慢又拖沓。一般 1 到 2 秒之间比较自然，ease-out 或 cubic-bezier(0.2, 0.8, 0.4, 1) 这类弹性缓动会让飞入更有动感。