javascript - css - 透明图像的动画背景

Question

我想在具有透明部分的图像下方创建一个背景颜色从下到上填充动画，因此，例如，我有以下图像(假设灰色是透明部分):

我想制作这样的动画:

本质上，我试图让图像的背景从下往上滑动，并且我希望填充量是动态的(0-100% 填充量)。 我的 HTML 格式与此类似:

<div>
  <img width="100" height="100" src="../img.png" />
</div>

如果需要，我可以调整图像和 html 布局以支持动画。

编辑:澄清一下，我将使用图像，我的意思是我可以自定义图像本身，但稍后它可能是一个新图像，我更愿意让它对给定图像具有鲁棒性(仅依赖透明度部分)。

Answer 1

简单地使用渐变和动画背景大小:

.box {
  width:200px;
  height:200px;
  background:
    /*replace the radial-gradient with your image*/
    radial-gradient(circle at center,transparent 50%,red 52%),
    /*this linear-gradient for the animation*/
    linear-gradient(green,green) bottom,
    /*bottom layer*/
    grey;
  background-size:auto,100% 0%;
  background-repeat:no-repeat;
  transition:2s;
}
.box:hover {
  background-size:auto,100% 100%;
}

<div class="box"></div>