css实现金币飞到钱袋的效果

CSS实现金币飞向钱袋的效果通常通过动画和定位技巧结合来完成。下面是一种简单的步骤：

1. **HTML结构**:
首先，创建一个金币元素（如`<div>`）和一个钱袋元素（同样是一个`<div>`），可以包含路径或SVG形状作为图片。

<div class="coin"></div>
<div class="pouch"></div>

2. **CSS基础样式**:
给金币和钱袋添加基本样式，包括大小、颜色和初始位置。

.coin {
  width: 50px;
  height: 50px;
  background-color: gold;
  position: absolute;
}

.pouch {
  width: 100px;
  height: 70px;
  background: url('path/to/pouch-image') no-repeat center;
  position: relative;
}

3. **CSS动画效果**:
使用关键帧动画（@keyframes）让金币从一个点移动到另一个点，并配合transition属性平滑过渡。例如，让金币向上移动至钱袋附近。

@keyframes fly-to-pouch {
  0% {
    top: 0;
    transform: translateY(-100px);
  }
  50% {
    top: calc(50% - 50px); /* 钱袋中心位置减去金币半径 */
    transform: translateY(0);
  }
  100% {
    top: 0;
    transform: translateY(-100px);
  }
}

.coin {
  animation: fly-to-pouch 2s ease-in-out infinite; /* 可调整持续时间和缓动函数 */
}

4. **触发动画**:
如果你想在某个事件（比如鼠标悬停）上启动动画，可以在`.coin:hover`选择器下应用动画。

.coin:hover {
  animation-play-state: running; /* 开始动画 */
}