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>

注意：答案中使用的图片不是我自己的。它们取自Build Internet Site。

Answer 1

使用CSS3动画可以创建类似于可用here（使用jQuery用于动画）的图像填充动画。它只需要两个容器用于图像，其中一个容器的动画高度为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>

我们在该链接网站中看到的另一件事是填充是以某个角度进行的。如果还需要，则应将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>

注意：答案中使用的图片不是我自己的。它们取自Build Internet Site。

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

1 个答案: