0

你好，教育界的开发人员和开发人员。

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

一直循环播放的烟雾效果我觉得很酷，所以我尝试重新制作它，

我尝试使用 css 动画来做到这一点，但我发现的问题是当带有背景的 div 处于 80% 左右时，你开始看到 div 留下的黑色空间。

我想让它看起来像一个没有结束的 cicle。（也许有淡入淡出的东西？）

这是我现在拥有的代码

.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

4

1 回答 1

0

您正在尝试移动块，而不是其中的背景。我建议动画background-position属性，而不是margin-left. 只要您的背景图像重复，您将不再有任何黑色空间

于 2013-07-19T00:04:51.997 回答