css - 如何创建类似于图像填充效果的 CSS3 动画？

Question

许多预加载器从下到上填充图像，如 this example .

如何在 CSS 中创建基于单个图像的动画来显示填充效果？我已尝试使用以下代码，但这只会产生图像滑动效果而不是填充效果。

我所说的填充效果是指实际图像慢慢填充一个帧(就像水填充一个水箱)。

.frame {
  position: relative;
  height: 600px;
  width: 300px;
  overflow: hidden;
  border: 1px solid;
}
.frame img {
  position: absolute;
  top: 100%;
  animation: fill-up 3s ease infinite;
}
@keyframes fill-up {
  to {
    top: 0px;
  }
}

<div class='frame'>
  <img src='http://buildinternet.com/live/imagefill/dude.jpg' />
</div>

Note: The images used in the answer are not my own. They were taken from Build Internet Site.

Answer 1

创建类似于可用动画的图像填充动画 here (使用 jQuery 制作动画)可以使用 CSS3 动画。它只需要两个用于图像的容器和一个从 0 到全高的动画高度。

下面是这个动画是如何创建的:

• 一个父容器元素，其高度、宽度等于(或大于)图像的高度、宽度
• 一个二级容器元素，相对于父元素的底部绝对定位。此元素的初始高度设置为 0，此元素上的动画产生填充效果。
• 图像也相对于顶级容器的底部绝对定位。
• 第二层容器有overflow: hidden 这样图像的其他部分就不会显示(它们被剪裁)。随着二级容器高度的动画化，越来越多的图像变得可见。

.container {
  position: relative;
  width: 300px;
  height: 600px;
}
.frame {
  position: absolute;
  bottom: 0px;
  left: 0px;
  height: 0px;
  width: 100%;
  overflow: hidden;
  animation: fill-up 3s ease infinite;  
}
.frame img {
  position: absolute;
  bottom: 0px;
}
@keyframes fill-up {
  to {
    height: 600px;
  }
}

<div class='container'>
  <div class='frame'>
    <img src='http://buildinternet.com/live/imagefill/dude.jpg' />
  </div>
</div>

---

正如您从上面的代码片段中看到的，在图像开始填满框架之前，框架不可见。如果像链接网站那样也需要，那么很难用一张图片实现。您将需要两个不同的图像元素，其中一个是填充透明的框架(以便位于其后面的实际图像可以透过)，另一个是实际图像。对于这个动画，我们需要一个额外的二级容器用于框架。下面是一个示例演示。

.container {
  position: relative;
  width: 300px;
  height: 600px;
}
.frame {
  position: absolute;
  bottom: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
}
.frame:nth-child(2) {
  bottom: 35px;
  left: 10px;
  height: 0px;
  overflow: hidden;
  z-index: -1;
  animation: fill-up 3s ease infinite;
}
.frame:nth-child(2) img {
  position: absolute;
  bottom: 0px;
}
@keyframes fill-up {
  to {
    height: 600px;
  }
}

<div class='container'>
  <div class='frame'>
    <img src='http://buildinternet.com/live/imagefill/dudeframe.png' />
  </div>
  <div class='frame'>
    <img src='http://buildinternet.com/live/imagefill/dude.jpg' />
  </div>
</div>

---

我们在该链接网站中看到的另一件事是填充发生在一个 Angular 。如果还需要，则应将 skew 转换添加到第二级容器(具有图像而不是框架的容器)。由于将变换添加到父级，因此图像也会倾斜。因此，应该向 img 元素添加反向转换，使其看起来正常。

.container {
  position: relative;
  width: 300px;
  height: 600px;
}
.frame {
  position: absolute;
  bottom: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
}
.frame:nth-child(2) {
  bottom: 40px;
  left: 10px;
  height: 0px;
  transform: skewY(-10deg);
  transform-origin: right bottom;
  overflow: hidden;
  z-index: -1;
  animation: fill-up 3s ease infinite;  
}
.frame:nth-child(2) img {
  position: absolute;
  bottom: 22px;
  transform: skewY(10deg);
}
@keyframes fill-up {
  to {
    height: 600px;
  }
}

<div class='container'>
  <div class='frame'>
    <img src='http://buildinternet.com/live/imagefill/dudeframe.png' />
  </div>
  <div class='frame'>
    <img src='http://buildinternet.com/live/imagefill/dude.jpg' />
  </div>
</div>

Note: The images used in the answer are not my own. They were taken from Build Internet Site.