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; }
}

---

比loki要多得多

你试图移动的是块，而不是块内的背景。我建议设置

背景位置

属性的动画，而不是

左边距

。只要你的背景图像重复，你就不会再有任何黑色空间了

不确定这是否有帮助，但他们使用两个图像…更一般地说，没有什么可以替代检查他们自己在做什么。抓起Firebug，拆开他们的标记+CSS，你就能看到它是如何工作的。谢谢这个快速的答案！2小时后终于开始工作了哈哈，还有一个问题，动画快结束时速度似乎变慢了。有什么解决办法吗？@jurjen有：

动画计时功能：linear

@jurjen抱歉，忘了你使用了速记定义。只需添加

linear

作为行

动画的最后一个参数：myfirst 200s infinitethanx非常感谢！