许多预加载器从下到上填充图像,如 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.
最佳答案
创建类似于可用动画的图像填充动画 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.
关于css - 如何创建类似于图像填充效果的 CSS3 动画?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35227659/