如何让背景图片完美旋转？

Question

我有以下问题：

我得到了一个 html 文本，我正在将其设置为透明，并以空间主题图像作为背景图像，并在网站上不时更改它。 图像在文本上旋转。我可以接受图像一次又一次旋转，但随后图像突然重置，看起来很糟糕。

如果您知道使图像完美旋转的简单形式，我将很乐意阅读它。

这是我正在使用的代码：

#FlawlessImageRotation {
  font-weight: bold;
  color: transparent;
  animation: rotateImages 7s linear infinite;
  background-image: url('path.webp');
  background-size: 69%; 
  background-clip: text;
  -webkit-background-clip: text; 
  -webkit-text-fill-color: transparent;
}

@keyframes rotateImages {
  0% {
    background-position: 0 0, 0 0, 0 0;
  }
  100% {
    background-position: 100% 0, 200% 0, 300% 0;
  }
}

<h2><strong id="FlawlessImageRotation"> TEXT </strong> more text.<br/> Even more text.
</h2>

使用此代码，图像在 7 秒内突然重置。 我希望图像能够像轮播一样在同一张图像上不断旋转。

Answer 1

我不完全确定这是否是您正在寻找的

#FlawlessImageRotation {
  font-weight: bold;
  color: rgba(0, 0, 0, 0.1);  /* Change the last value (0.1) for transparency */
  animation: rotateImages 14s linear infinite;
  background-image: url('https://cdn.imgpaste.net/2022/10/10/Kem93m.png'), url('https://cdn.imgpaste.net/2022/10/10/Kem93m.png'), url('https://cdn.imgpaste.net/2022/10/10/Kem93m.png');
  background-size: 300%, 800%, 400%; /* Change the values for size required*/
  background-clip: text;
}

@keyframes rotateImages {
  0% {
    background-position: 0 0, 100% 0, 200% 0;
  }
  33.33% {
    background-position: 100% 0, 200% 0, 300% 0;
  }
  66.67% {
    background-position: 200% 0, 300% 0, 400% 0;
  }
  100% {
    background-position: 300% 0, 400% 0, 500% 0;
  }
}

<br><br><br><br><br>
<h2><strong id="FlawlessImageRotation">TEXT</strong> more text.<br/>Even more text.</h2>

我尝试使用一些随机图像。您可以将

url()

中的图片替换为您的图片并尝试。但请让我知道它是否对你有用