Question

你好教育方面的开发人员和开发人员。

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

我认为保持循环的烟雾效果非常酷，所以我试图重拍它，

我试图用css动画做到这一点，但我发现的问题是当div与背景是80％，你开始看到div留下的黑色空间。

我想让它看起来像是一个无尽的结局。（也许是fadein的东西？）

这是我现在的代码

.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而言非常感谢

Answer 1

你试图移动块，而不是它内部的背景。我建议动画background-position属性，而不是margin-left。只要背景图像重复，就不会有任何黑色空间

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

1 个答案: