背景图像无限地移动到全宽度容器内的左侧 [英] Background image infinitely moving to the left within full width container

问题描述

我想创建一个无限滚动（向左）图像动画，其中容器是全宽，背景图像水平重复。所以它总是像一个自动收报机样式 - 同样的图像无限移动到左边没有间隙。

理想情况下，我想它是纯html和css如果可能的话。

这是我的尝试 - https：// jsfiddle .net / 7Ljz82n9 /

此时，它向左移动，但在结尾处有一个间隙，它跳转，我在哪里出错？ / p>

Html

 < div class =tech-slideshow> ; 
< div class =mover-1>< / div> 
< / div> 
  

CSS

  .tech-slideshow {
 height：102px; 
 width：100％; 
 margin：0 auto; 
 position：relative; 
 overflow：hidden; 
 transform：translate3d（0，0，0）; 
} 
 
 .tech-slideshow> div {
 width：1440px; 
 background：url（http://placehold.it/1440x102）; 
 position：absolute; 
 top：0; 
 left：0; 
 height：100％; 
 transform：translate3d（0，0，0）; 
 background-repeat：repeat-x; 
} 
 .tech-slideshow .mover-1 {
 animation：moveSlideshow 12s linear infinite; 
} 
 
 @keyframes moveSlideshow {
 100％{
 transform：translateX（-66.6666％）; 
} 
} 
  

解决方案

你愿意在幻灯片中使用两个div，你可以这样做：

  .tech-slideshow {height：102px; width：100％; max-width：1440px; / *最多可以是图像的宽度* / margin：0 auto;位置：相对; overflow：hidden; transform：translate3d（0，0，0）;}。wrapper {height：102px; width：2880px;}。wrapper div {position：absolute; width：1440px; height：102px; background：url（'http://placehold.it/1440x102'）右上角没有重复; margin：0; padding：0; animation：moveiv 12s linear infinite;}。wrapper div.second {padding-left：1440px;动画：moveiv 12s linear infinite;} @ keyframes moveiv {0％{margin-left：0px; } 100％{margin-left：-1440px; }}  

 < div class =tech-slideshow > < div class =wrapper> < div class =first>< / div> < div class =second>< / div> < / div>< / div>  

div到左边，直到完成一个完整的旋转，第二张图片是在同一地点第一张幻灯片，现在可以再次显示。第二个div上的填充是使它在第一个div后对齐。

这里也是一个小玩意： https://jsfiddle.net/thepio/7Ljz82n9/4/

编辑：

我以为自己为什么使用伪元素不可能。它是！这里有一个使用伪元素 ::后只有一个div的例子。我想你可以找出宽度，边距和padding等（1 x图像宽度或2 x图像宽度）。

  .tech-slideshow {height：102px; width：100％; max-width：1440px; / *最多可以是图像的宽度* / margin：0 auto;位置：相对; overflow：hidden; transform：translate3d（0，0，0）;}。wrapper {height：102px; width：2880px;}。wrapper div {position：absolute; width：1440px; height：102px; background：url（'http://placehold.it/1440x102'）右上角没有重复; margin：0; padding：0; animation：moveiv 12s linear infinite;}。wrapper div :: after {display：block; content：''; width：1440px; height：102px; padding-left：1440px; background：url（'http://placehold.it/1440x102'）右上角no-repeat;} @ keyframes movediv {0％{margin-left：0px; } 100％{margin-left：-1440px; }}  

 < div class =tech-slideshow > < div class =wrapper> < div class =first>< / div> < / div>< / div>  

fiddle about it： https://jsfiddle.net/thepio/05w6ceue/1/

I want to create an infinitely scrolling (to the left) image animation, where the container is full width and the background image is repeated horizontally. So it will always be like a ticker style - the same image just infinitely moves to the left with no gaps.

Ideally I'd like it to be pure html and css if possible.

This is my attempt - https://jsfiddle.net/7Ljz82n9/

At the moment it moves to the left but there's a gap at the end and it jumps, where am I going wrong?

Html

<div class="tech-slideshow">
  <div class="mover-1"></div>
</div>

CSS

.tech-slideshow {
  height: 102px;
  width:100%;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}

.tech-slideshow > div {
  width: 1440px;
  background: url(http://placehold.it/1440x102);
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  transform: translate3d(0, 0, 0);
  background-repeat:repeat-x;
}
.tech-slideshow .mover-1 {
  animation: moveSlideshow 12s linear infinite;
}

@keyframes moveSlideshow {
  100% { 
    transform: translateX(-66.6666%);  
  }
}

解决方案

If you are willing to use two divs inside the "slideshow" you could do something like this:

.tech-slideshow {
  height: 102px;
  width: 100%;
  max-width: 1440px; /* Can be at most the width of the image */
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}

.wrapper {
  height: 102px;
  width: 2880px;
}

.wrapper div {
  position: absolute;
  width: 1440px;
  height: 102px;
  background: url('http://placehold.it/1440x102') top right no-repeat;
  margin: 0;
  padding: 0;
  animation: movediv 12s linear infinite;
}

.wrapper div.second {
  padding-left: 1440px;
  animation: movediv 12s linear infinite;
}

@keyframes movediv {
 0% { margin-left: 0px; }
 100% { margin-left: -1440px; }
}

<div class="tech-slideshow">
  <div class="wrapper">
    <div class="first"></div>
    <div class="second"></div>
  </div>
</div>

This will move the divs to the left until a full rotation is made and the second picture is "in the same spot" the first slide and can now be shown again. The padding on the second div is to make it align after the first div. You can alter this to use something else etc.

Here's also a fiddle to play around with: https://jsfiddle.net/thepio/7Ljz82n9/4/

EDIT:

I thought to myself why would this not be possible with using pseudo-elements. And it is! Here's an example of using the pseudo-element ::after with only one div. I think you can figure out the widths, margins and paddings etc (1 x image width or 2 x image width).

.tech-slideshow {
  height: 102px;
  width: 100%;
  max-width: 1440px; /* Can be at most the width of the image */
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}

.wrapper {
  height: 102px;
  width: 2880px;
}

.wrapper div {
  position: absolute;
  width: 1440px;
  height: 102px;
  background: url('http://placehold.it/1440x102') top right no-repeat;
  margin: 0;
  padding: 0;
  animation: movediv 12s linear infinite;
}

.wrapper div::after {
  display: block;
  content: '';
  width: 1440px;
  height: 102px;
  padding-left: 1440px;
  background: url('http://placehold.it/1440x102') top right no-repeat;
}

@keyframes movediv {
 0% { margin-left: 0px; }
 100% { margin-left: -1440px; }
}

<div class="tech-slideshow">
  <div class="wrapper">
    <div class="first"></div>
  </div>
</div>

And also a fiddle about it: https://jsfiddle.net/thepio/05w6ceue/1/

这篇关于背景图像无限地移动到全宽度容器内的左侧的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！