使用 CSS 的无限图标滑块

Posted 2023-03-05

【中文标题】使用 CSS 的无限图标滑块

【英文标题】：Infinite icon slider using CSS

【发布时间】：2018-07-30 17:43:54

【问题描述】：

我有 10 个图标，我从右到左水平滚动。 我正在尝试为图标无限设置动画，但在图标末尾获得空间并且它从一个跳跃。

我必须删除图标末尾的空格，幻灯片将继续从一个开始而不跳转。我的意思是我需要一个无限循环。

你能帮我解决这个问题吗？

.logowidth: 100%;
.logo_slider 
  overflow: hidden;
width: 752px;
margin: auto;


.logo_slider 
  overflow: hidden;


.logo_slider ul 
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  position: relative;
  animation: mymove 10s linear infinite;


.logo_slider ul li 
  flex-shrink: 0;
  flex-grow: 0;
  display: block;
  border: 1px solid #ccc;
  margin: 20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;


.logo_slider ul li a img 
  width: 100%;


/* Safari 4.0 - 8.0 */
@-webkit-keyframes mymove 
  0%     left: 0; 
  100%   left: -100%; 


/* Standard syntax */

@keyframes mymove 
  0%     left: 0; 
  100%   left: -100%; 

<div class="logo">
	<div class="logo_slider">
<ul>
	<li><a href=""><img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/android_O_Preview_Logo.png"></a></li>
	<li><a href=""><img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Android_O_Preview_Logo.png"></a></li>
	<li><a href=""><img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Android_O_Preview_Logo.png"></a></li>
	<li><a href=""><img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Android_O_Preview_Logo.png"></a></li>
	<li><a href=""><img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Android_O_Preview_Logo.png"></a></li>
	<li><a href=""><img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Android_O_Preview_Logo.png"></a></li>
	<li><a href=""><img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Android_O_Preview_Logo.png"></a></li>
	<li><a href=""><img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Android_O_Preview_Logo.png"></a></li>
	<li><a href=""><img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Android_O_Preview_Logo.png"></a></li>
	<li><a href=""><img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Android_O_Preview_Logo.png"></a></li>
	
</ul>
</div>
</div>

【问题讨论】：

同一时刻可以看到多少个图标？这些图标都与您的示例中的图标相同，或者它们可能不同？

我需要在 sn-p 上添加的相同滑块。我必须继续滑块图像。我必须同时看到六个图标。

【参考方案1】：

Codepen demo

---

这个想法是将滑块移动120px，即滑动一个图标所需的像素数量（每个列表项实际上是80px 宽加上40px 的边距）。由于图标都是相同的图标，因此最终结果将是无缝的。

出于性能考虑，移动是使用transform 属性而不是left 完成的。

请确保添加足够多的图像以覆盖所有不同的视口（加一个）

CSS

.logo_slider 
  overflow: hidden;
  width: 752px;
  margin: auto;


.logo_slider 
  overflow: hidden;


.logo_slider ul 
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  animation: mymove 1s linear infinite;


.logo_slider ul li 
  flex-shrink: 0;
  display: block;
  border: 1px solid #ccc;
  margin: 20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  box-sizing: border-box;


.logo_slider img 
  width: 100%;


@keyframes mymove 
  0%     transform: 0; 
  100%   transform: translateX(-120px); 

---

无论如何，我强烈建议滑动带有该图标的元素作为重复背景（图标本身包含灰色边框），而不是使用多个图像。

这是一个使用背景的例子

Codepen demo

使用这种方法，通过将内部元素（包含背景的伪元素:before）的宽度设置为父容器的宽度加上120px（这是使用@987654333 @函数）

标记很简单

<div class="optimizedslider"></div>

风格

.optimizedslider 
  overflow: hidden;
  width: 750px;
  height: 100px;
  margin: auto;


.optimizedslider:before 
  content: "";
  display: block;
  background: url(https://url.to/icon.png) repeat-x;
  background-size: 120px 100px;
  height: 100%;
  width: calc(100% + 120px);
  animation: mymove 1s linear infinite;



@keyframes mymove 
  0%     transform: 0; 
  100%   transform: translateX(-120px); 

最后，这里是我用过的图标 (240x200)，以备不时之需

【讨论】：

太酷了！谢谢@fcalderan，我需要这样。我在过去 2 天尝试此问题表，您在 5 分钟内解决了它。真的很感激。支持我的观点。

如果我必须显示所有 10 个图标呢？删除宽度？

使用您的方法，您需要插入 11 张图像。重复背景只有一个

但我只有 10 张图片。那么 11 张图片背后的逻辑是什么？

给出运动的错觉。第一个图标必须消失

【参考方案2】：

因此，每次图标从屏幕上移开时，我们都会将其完全移除，无论如何没人能看到它。同时，我们在屏幕的另一侧创建另一个，以便它移动到画布上。用这个改变你的动画“mymove”

@keyframes mymove 
  0%     translate: 0; 
  100%   transform: translateX(-120px)  

在您的示例中，120 像素大约是一个图标的宽度。您还需要一个比您想要显示的图标多一个图标。如果您想显示 6，请留下 7，以便最后的一个可以产生错觉。