CSS关键帧动画问题：如何将圆形精准放置在圆锥顶部？

修正思路 #

1. 统一定位基准：给父容器设置相对定位，确保所有绝对定位元素的参考系一致，避免基于整个页面定位的混乱。
2. 圆锥居中处理：通过transform: translateX(-50%)让圆锥水平居中，明确其顶部中心的位置为容器的水平50%、垂直90%处。
3. 精准对齐动画：利用transform的translate属性结合scale，基于元素自身尺寸计算偏移量，确保缩放后的冰淇淋球底部中心完美贴合圆锥顶部中心，同时保证响应式适配。

修正后的完整代码 #

CSS

#flavour-con {
  position: relative;
  width: 100%;
  height: 100vh; /* 让容器占满视口高度，适配响应式 */
}

.flavour {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  text-align: center;
  transition: all 1s;
  background-color: orange;
  position: absolute;
  top: 35%;
  left: 10%;
}

/* 给不同口味设置不同初始位置，避免重叠 */
#mango {
  left: 25%;
}
#strawberry {
  left: 40%;
}
#blueberry {
  left: 55%;
}
#cookies {
  left: 70%;
}
#mint {
  left: 85%;
}

.flavourselected {
  animation: flavourSelected 1s 1 ease-in-out forwards;
}

@keyframes flavourSelected {
  100% {
    top: 90%;
    left: 50%;
    /* translate(-50%, -100%) 让元素水平居中，垂直方向向上移动自身完整高度，使底部对齐圆锥顶部 */
    transform: translate(-50%, -100%) scale(3);
  }
}

#cone {
  width: 0;
  height: 0;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
  border-top: 120px solid lightsalmon;
  border-radius: 50%;
  position: absolute;
  top: 90%;
  left: 50%;
  transform: translateX(-50%); /* 圆锥水平居中，顶部中心对齐容器50%水平位置 */
}

HTML

<div id="flavour-con">
  <div id="orange" class="flavour">
    <p>orange</p>
  </div>
  <div id="mango" class="flavour">
    <p>mango</p>
  </div>
  <div id="strawberry" class="flavour">
    <p>strawberry</p>
  </div>
  <div id="blueberry" class="flavour">
    <p>blueberry</p>
  </div>
  <div id="cookies" class="flavour">
    <p>cookies</p>
  </div>
  <div id="mint" class="flavour">
    <p>mint</p>
  </div>
</div>

<div id="cone"></div>

补充说明 #

• 给不同口味的冰淇淋球设置了不同初始left值，避免重叠，方便测试点击效果。
• 使用transform进行位置偏移和缩放，是因为translate的百分比基于元素自身尺寸，缩放后仍能保持相对位置的准确性，完美适配不同屏幕尺寸。

内容的提问来源于stack exchange，提问作者Yan