如何将CSS圆形填充动画修改为从底部向上填充？

要把圆形填充动画从中心向外缩放改成从底部向上填充，只需要调整内部圆形的变换原点和动画逻辑即可，具体修改如下：

修改后的CSS代码 #

.circle-up {
  width: 210px;
  height: 210px;
  background-color: black;
  border-radius: 100vh !important;
  margin-bottom: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.circle-inner {
  width: 95%;
  height: 95%;
  background-color: #76FA69;
  border-radius: 100vh !important;
  transform: scaleY(0); /* 初始Y轴缩放为0 */
  transform-origin: bottom center; /* 设置变换原点为底部中心 */
  animation: childFromBottom 1s 1s ease-in forwards;
}

@keyframes childFromBottom {
  0% {
    transform: scaleY(0);
  }
  100% {
    transform: scaleY(1);
  }
}

说明 #

• transform-origin: bottom center 让动画的变换起点固定在圆形底部中心，确保填充从底部开始
• 将原来的scale(0)改为scaleY(0)，动画中过渡到scaleY(1)，实现仅在垂直方向从下往上展开的效果
• HTML结构无需修改，保持原有的嵌套结构即可

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