Question

我想在具有透明部分的图像下方创建从底到上填充背景色的动画，因此，例如，我有以下图像（假设灰色是透明部分）：

，我想创建一个这样的动画：

基本上，我正在尝试使图像的背景从下到上滑动，我希望填充量是动态的（0-100％填充量）。我的HTML的格式与此类似：

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

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

编辑：为了澄清，我将使用一个图像，我的意思是我可以自定义图像本身，但是以后可能是新图像，因此我希望使其对给定图像具有鲁棒性（仅依赖透明度部分。

Answer 1

如果不必使用图像，则可以使用纯CSS。还有fiddle is here。

.star {
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  background-color: grey;
  height: 280px;
  position: relative;
} 

.star .inner {
  position: absolute;
  bottom: 0;
  height: 280px;
  width: 280px;
  background-color: red;
  animation: fill-star 2s;
}

.fill-container {
  background-color: yellow;
  height: 280px;
  width: 280px;
}


@keyframes fill-star {
  0%   { transform: translateY(100%) }
  100% { transform: translateY(0) }
}

<div class="fill-container">
  <div class="star">
    <div class="inner">
    </div>
  </div>
</div>

Answer 2

只需使用渐变并设置背景大小的动画即可

.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>

CSS-透明图像的动画背景

2 个答案: