html - 如何使动画在CSS中的PNG图像上运行？

Question

我在 animateCloud 的 png 图像上创建了一个动画脚本，动画有效，但图像不连接，我想让图片完全不中断，就像有图片中的重复请帮助如何编码？

这是我的代码

<img class="img-baby-g-about for-desktop" src="assets/images/img-desktop-about.png" alt="baby g bga-240 about" width="100%">

这是我的CSS

    @-webkit-keyframes animateCloud {0% {margin-left: -100px;}100% {margin-left: 100%;}}
    @-moz-keyframes animateCloud {0% {margin-left: -1000px;}100% {margin-left: 100%;}}
    @keyframes animateCloud  {0% {margin-left: -1000px;}100% {margin-left: 100%;}}

    .img-baby-g-about {
    -webkit-animation: animateCloud 10s linear infinite;
    -moz-animation: animateCloud 10s linear infinite;
    animation: animateCloud 10s linear infinite;}

我的意思是我的动画会运行并清除页面，但我想要的是图像不会清空页面

Answer 1

如果你想用 <img> 来做到这一点元素，它一定相当棘手。您将不得不使用至少两个元素，定位会很棘手，而且要使其具有响应性会相当困难。

我建议您为此使用背景图像，因为背景重复非常适合这种情况。如果你真的想要一个实际的 <img>用于内容/seo 目的或其他目的的标签，那么我建议背景图像仍然是为其设置动画的方式，并且只需使用负填充黑客将真实图像推到无处可去。

下面是如何使用背景图片:

.img-baby-g-about {
  width: 100%;
  height: 327px;
  animation: animateCloud 10s linear infinite;
  background-image: url(https://i.postimg.cc/T1nt9ZLk/Lv8L0.png);
  background-repeat: repeat-x;
  background position: 0 0;
}
    
@keyframes animateCloud  {0% {background position: 0 0;}100% {background-position: 1280px 0;}}

<div class="img-baby-g-about"></div>

---

注意事项:

1. 我将元素的高度设置为 327 像素，因为这是图像的高度(图像主机调整了它的大小)。我们可以使用 background-size更改它，甚至使用百分比来缩放图像，但是随后必须调整动画以也使用百分比来适应，并且由于背景位置相对于图像和容器的关系，这将有点棘手(见下文)。

2. 我将 100% 动画帧设置为 position: 1280px 0;因为图像是 1280 像素宽 (图像主机调整了它的大小)。

3. 您的原始图像是 2560x654 (图像托管服务自动缩放它)。因此，要使用您的图像，您应该更改上面的相关像素尺寸。

Responsive Solution

So to make this more responsive, and less dependent on the image dimensions lets use percentages to scale and animate the background image, this way you won't need to change it suit different pixel dimensions for different images.

We can't use 100% though, because if we do, background-position becomes useless, because of how background position is relative to both the image and the container, if they are the same, then all points are equivalent, and no shifting can occur. So we'll use 110% for background-size. Then to actually move the image the full width of the image, we will work with the 10% difference between the container and the image, so 110%(the image) x 10(the difference) is 1100%. So that is the amount we shift the background image to move it across it's full width.

I made the container 100% window height and stuck the animation to the bottom of the container. You could adjust that to suit your requirements.

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
.img-baby-g-about {
  width: 100%;
  height: 100%;
  animation: animateCloud 10s linear infinite;
  background-image: url(https://i.postimg.cc/T1nt9ZLk/Lv8L0.png);
  background-repeat: repeat-x;
  background-position: left bottom;
  background-size: 110%;
}
    
@keyframes animateCloud  {0% {background-position: 1100% bottom;}100% {background-position: 0% bottom;}}

<div class="img-baby-g-about"></div>