从右到让和从左到右的无限客户端徽标，无需插件

Posted 2023-05-08

【中文标题】从右到让和从左到右的无限客户端徽标，无需插件

【英文标题】：infinite client logo from right to let and left to right without plugin

【发布时间】：2022-01-06 00:09:36

【问题描述】：

我有一个客户的标志，我必须从右向左滑动第一行无限水平，从左向右滑动第二行。我必须在页面加载时显示 6 个客户端徽标

我遇到了两个问题。

第一行，过了一段时间直接跳到第一行。 在第二行，它没有像预期的那样顺利。

我尝试了以下代码。请检查一次

.client-logo-wrap 
  position: relative;
  overflow: hidden;
  height: 150px;


.client-logo 
  position: absolute;
  top: 0px;
  left: 0px;
  overflow: hidden;
  white-space: nowrap;
  display: flex;


.client-logo-left 
  animation: logomoveleft 10s linear infinite;


.client-logo-right 
  animation: logomoveright 10s linear infinite;


.client-logo li 
  background: #FFFFFF;
  border-radius: 8px;
  padding: 20px !important;
  height: 100px;
  width: 220px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  margin: 0px 5px;



/*
.second-row 
  top: 150px;
*/

@keyframes logomoveleft 
  0% 
    transform: translate(0, 0);
  
  100% 
    transform: translate(-30%, 0);
  


@keyframes logomoveright 
  0% 
    transform: translate(0, 0);
  
  100% 
    transform: translate(30%, 0);
  

<div class="client-logo-wrap">
  <ul class="client-logo client-logo-left">
    <li><img src="https://via.placeholder.com/150"  />1</li>
    <li><img src="https://via.placeholder.com/150"  />2</li>
    <li><img src="https://via.placeholder.com/150"  />3</li>
    <li><img src="https://via.placeholder.com/150"  />4</li>
    <li><img src="https://via.placeholder.com/150"  />5</li>
    <li><img src="https://via.placeholder.com/150"  />6</li>
    <li><img src="https://via.placeholder.com/150"  />7</li>
    <li><img src="https://via.placeholder.com/150"  />1</li>
    <li><img src="https://via.placeholder.com/150"  />2</li>
    <li><img src="https://via.placeholder.com/150"  />3</li>
    <li><img src="https://via.placeholder.com/150"  />4</li>
    <li><img src="https://via.placeholder.com/150"  />5</li>
    <li><img src="https://via.placeholder.com/150"  />6</li>
    <li><img src="https://via.placeholder.com/150"  />7</li>


  </ul>
</div>
<div class="client-logo-wrap  mt-3">
  <ul class="client-logo second-row client-logo-right">
    <li><img src="https://via.placeholder.com/100"  />1</li>
    <li><img src="https://via.placeholder.com/100"  />2</li>
    <li><img src="https://via.placeholder.com/100"  />3</li>
    <li><img src="https://via.placeholder.com/100"  />4</li>
    <li><img src="https://via.placeholder.com/100"  />5</li>
    <li><img src="https://via.placeholder.com/100"  />6</li>
    <li><img src="https://via.placeholder.com/100"  />7</li>
    <li><img src="https://via.placeholder.com/100"  />1</li>
    <li><img src="https://via.placeholder.com/100"  />2</li>
    <li><img src="https://via.placeholder.com/100"  />3</li>
    <li><img src="https://via.placeholder.com/100"  />4</li>
    <li><img src="https://via.placeholder.com/100"  />5</li>
    <li><img src="https://via.placeholder.com/100"  />6</li>
    <li><img src="https://via.placeholder.com/100"  />7</li>
  </ul>
</div>

【问题讨论】：

两者可能都应该是50%。 logomoveright 应该从 50% 开始并动画到 0。

@Ouroborus，我应该在哪里使用 50% 的 logomoveright？

【参考方案1】：

要使其无限循环而不会注意到循环回到 0%，您需要使用 JS 制作一些东西，当它不再可见时，它会在开始时移动一个块。

要从左到右固定，请将块的位置从 X 轴的 -100% 开始。

.client-logo-wrap 
  position: relative;
  overflow: hidden;
  height: 150px;


.client-logo 
  position: absolute;
  top: 0px;
  left: 0px;
  overflow: hidden;
  white-space: nowrap;
  display: flex;


.client-logo-left 
  animation: logomoveleft 10s linear infinite;


.client-logo-right 
  transform: translate(-100%, 0);
  animation: logomoveright 10s linear infinite;


.client-logo li 
  background: #FFFFFF;
  border-radius: 8px;
  padding: 20px !important;
  height: 100px;
  width: 220px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  margin: 0px 5px;



/*
.second-row 
  top: 150px;
*/

@keyframes logomoveleft 
  0% 
    transform: translate(0, 0);
  
  100% 
    transform: translate(-30%, 0);
  


@keyframes logomoveright 
  0% 
    transform: translate(-100%, 0);
  
  100% 
    transform: translate(0, 0);
  

<div class="client-logo-wrap">
  <ul class="client-logo client-logo-left">
    <li><img src="https://via.placeholder.com/150"  />1</li>
    <li><img src="https://via.placeholder.com/150"  />2</li>
    <li><img src="https://via.placeholder.com/150"  />3</li>
    <li><img src="https://via.placeholder.com/150"  />4</li>
    <li><img src="https://via.placeholder.com/150"  />5</li>
    <li><img src="https://via.placeholder.com/150"  />6</li>
    <li><img src="https://via.placeholder.com/150"  />7</li>
    <li><img src="https://via.placeholder.com/150"  />1</li>
    <li><img src="https://via.placeholder.com/150"  />2</li>
    <li><img src="https://via.placeholder.com/150"  />3</li>
    <li><img src="https://via.placeholder.com/150"  />4</li>
    <li><img src="https://via.placeholder.com/150"  />5</li>
    <li><img src="https://via.placeholder.com/150"  />6</li>
    <li><img src="https://via.placeholder.com/150"  />7</li>


  </ul>
</div>
<div class="client-logo-wrap  mt-3">
  <ul class="client-logo second-row client-logo-right">
    <li><img src="https://via.placeholder.com/100"  />1</li>
    <li><img src="https://via.placeholder.com/100"  />2</li>
    <li><img src="https://via.placeholder.com/100"  />3</li>
    <li><img src="https://via.placeholder.com/100"  />4</li>
    <li><img src="https://via.placeholder.com/100"  />5</li>
    <li><img src="https://via.placeholder.com/100"  />6</li>
    <li><img src="https://via.placeholder.com/100"  />7</li>
    <li><img src="https://via.placeholder.com/100"  />1</li>
    <li><img src="https://via.placeholder.com/100"  />2</li>
    <li><img src="https://via.placeholder.com/100"  />3</li>
    <li><img src="https://via.placeholder.com/100"  />4</li>
    <li><img src="https://via.placeholder.com/100"  />5</li>
    <li><img src="https://via.placeholder.com/100"  />6</li>
    <li><img src="https://via.placeholder.com/100"  />7</li>
  </ul>
</div>

【讨论】：

它对我有用。谢谢你的帮助