html - 循环背景我需要使用什么？

Question

各位开发者和教育领域的开发者大家好。

今天我在这个网站的标题上看到了这个很酷的效果 https://www.premiumsmoking.com/nl/e-sigaret/megatwix.html

不断循环的烟雾效果我觉得很酷所以我尝试重新制作它，

我尝试使用 css 动画来做到这一点，但我发现的问题是当 div 与背景打开了大约 80%，您开始看到留给 div 的黑色空间。

我想让它看起来像一个没有尽头的圆环。 (也许有淡入淡出的东西？)

这是我现在的代码

.element {
    width:3000px;
    height:1000px;
    background-image:url(moveimage1.png);
    position:relative;
    margin:10px;
    z-index: -1;

animation:myfirst 200s infinite;
}
@keyframes myfirst
   {
0%   {opacity: 0.25; margin-left:  -1500px; }
50%  {opacity: 1;}
100% {opacity: 0.25; margin-left: 1000px; }
}

我真的希望有人能帮我解决这个“问题”

(如果我在这篇文章中做错了什么，我很抱歉，我第一次问关于堆栈溢出的问题)

感谢您阅读我的问题。

--编辑--

对于所有也想使用它的人，这是我的最终代码:

.element {
    width:100%;
    height:1000px;
    background-image:url(moveimage1.png);
    background-size: 3000px 1000px;
    float: left;
    position:relative;
    z-index: -1;

animation:myfirst 10s infinite linear;
}
@keyframes myfirst
   {
0%   {opacity: 0.25; background-position:  0; }
50%  {opacity: 1;}
100% {opacity: 0.25; background-position: 3000px; }
}

非常感谢洛基

Answer 1

您正在尝试移动方 block ，而不是其中的背景。我建议为 background-position 属性设置动画，而不是 margin-left。只要你的背景图片重复，你就不会再有任何黑色空间