如何制作一个无限循环在 X 轴上移动的 div？

如何解决如何制作一个无限循环在 X 轴上移动的 div？

我想知道如何才能做到这一点。我想做一个无限循环滑块。但是我不能让它一开始越过右边就出现在另一边。有什么想法吗？这是现在的样子

这是我的代码：

<div className='home-container'>
        <div className='slider-top'>
            <img className='top-28866' src={Home28866} 
 alt="Home28866Top1" />
            <img className='top-28866' src={Home28866} 
 alt="Home28866Top2" />
            <img className='top-28866' src={Home28866} 
 alt="Home28866Top3" />
            <img className='top-28866' src={Home28866} 
 alt="Home28866Top4" />
            <img className='top-28866' src={Home28866} 
 alt="Home28866Top5" />
            <img className='top-28866' src={Home28866} 
 alt="Home28866Top6" />
        </div>
    </div>

    .slider-top {
display: flex;
justify-content: space-between;
animation: marquee-mobile 20s infinite cubic-bezier(0.53,0.47,1,1);
width: 100%;
height: 5vw;
padding-top: 3vw;
overflow: hidden;
-webkit-Box-pack: start;

}

 @keyframes marquee-mobile {
 0%  {
    -webkit-transform: translateX(0);
    transform: translateX(0);
 }

 100% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
 }
 }

解决方法

您可以将内容翻倍

纯文本：

[container] {
  display: inline-block;
  overflow: hidden;
}

[marquee] {
  position: relative;
  white-space: nowrap;
  padding: 10px;
  animation: t 3s linear infinite;
}

[marquee]:before {
  content: attr(data);
}

[marquee]:after {
  content: attr(data);
  position: absolute;
  left: 100%;
  top: 0;
  padding: inherit;
}

@keyframes t {
  to {
    transform: translateX(-100%);
  }
}

<div container>
  <div marquee data="Lorem Ipsum is simply dummy text of the print">
  </div>
</div>

标记：

[container] {
    overflow: hidden;
    max-width: 100%;
}

[marquee] {
    display: inline-block;
    position: relative;
    animation: t 10s linear infinite;
}

[content],[dupContent] {
    display: inline-flex;
    white-space: nowrap;
}

[dupContent] {
    position: absolute;
    left: 100%;
    top: 0;
}

@keyframes t {
    to {
        transform: translateX(-100%);
    }
}

[box]:nth-child(1) {
    background: hsla( 0,100%,50%,0.8);
}

[box]:nth-child(2) {
    background: hsla( 40,0.8);
}

[box]:nth-child(3) {
    background: hsla( 80,0.8);
}

[box]:nth-child(4) {
    background: hsla(120,0.8);
}

[box]:nth-child(5) {
    background: hsla(160,0.8);
}

[box]:nth-child(6) {
    background: hsla(200,0.8);
}

[box]:nth-child(7) {
    background: hsla(240,0.8);
}

[box]:nth-child(8) {
    background: hsla(280,0.8);
}

[box]:nth-child(9) {
    background: hsla(320,0.8);
}

[box] {
    padding: 20px;
    font-size: 80px;
    font-weight: bold;
    color: white;
}

<div container>
  <div marquee>
    <div content>
      <div box>1</div>
      <div box>2</div>
      <div box>3</div>
      <div box>4</div>
      <div box>5</div>
      <div box>6</div>
      <div box>7</div>
      <div box>8</div>
      <div box>9</div>
    </div>
    <div dupContent>
      <div box>1</div>
      <div box>2</div>
      <div box>3</div>
      <div box>4</div>
      <div box>5</div>
      <div box>6</div>
      <div box>7</div>
      <div box>8</div>
      <div box>9</div>
    </div>
  </div>
</div>

注意：我们在这里处理的是绝对定位，因此如果您是填充/边距或任何类型的定位，则需要稍微小心

div {
    width: 50px; /* Changeable*/
  position: relative;
  animation-name: example;
  animation-duration: 2s; /* Changeable */
  animation-iteration-count: infinite; /* Changeable */
  animation-timing-function: linear;
}

/* Everything in @keyframes example{} is changeable */
@keyframes example {
  0%   {left:-20%; top:0px;}
  100% {left:102%; top:0px;}
}

<!DOCTYPE html>
<html>
<head> 

</head>
<body>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

<div>Placeholder text</div>

</body>
</html>

这是你的意思吗？我将“/* Changeable */”标签添加到您可以自定义而不会弄乱动画的任何内容。当然，您也可以添加自己的 css。