Question

我有超过10个徽标图像。在页面加载时，我只需显示6个徽标，剩余的徽标将从右向左无限水平滑动。

你会帮我解决关键帧和CSS吗？

我找到了这个例子 https://codepen.io/mdashikar/pen/VWPvgE 但对我来说不是100％。如果您注意到图像是从右侧到左侧的滑动并且等待几秒钟再次滑动。我需要图像应该不停地继续滑动。

.logo_slider {}
.logo_slider ul { 
  margin: 0;
  padding: 0;
  list-style: none;
}

.logo_slider ul li {
  display: inline-block;
  border: 1px solid #ccc;
  margin: 20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
}

.logo_slider ul li a img {
  width: 100%;
  -webkit-animation: mymove 5s infinite; /* Safari 4.0 - 8.0 */
  animation: mymove 5s infinite;
}	

/* Safari 4.0 - 8.0 */
@-webkit-keyframes mymove {
  from { right: 0px;  }
  to   { left: 200px; }
}

/* Standard syntax */
@keyframes mymove {
  from { right:0px;   }
  to   { left: 200px; }
}

<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>
  </ul>
</div>

Answer 1

这是你在找什么？

.logo_slider {
  overflow: hidden;
}

.logo_slider ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.logo_slider ul li {
  display: inline-block;
  border: 1px solid #ccc;
  margin: 20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
}

.logo_slider ul li a img {
  position: relative;
  width: 100%;
  position: relative;
}

.logo_slider ul li:nth-child(1n+7) a img {
  -webkit-animation: mymove 5s infinite;
  /* Safari 4.0 - 8.0 */
  animation: mymove 5s infinite;
}


/* Safari 4.0 - 8.0 */

@-webkit-keyframes mymove {
  from {
    left: 100vw;
  }
  to {
    left: 0;
  }
}


/* Standard syntax */

@keyframes mymove {
  from {
    left: 100vw;
  }
  to {
    left: 0;
  }
}

另请查看我的代码：https://codepen.io/zothynine/pen/VQyzQZ

Answer 2

试试这个应该有效

// Fetch variables
var scrollTop = $(document).scrollTop();
var windowHeight = $(window).height();
var bodyHeight = $(document).height() - windowHeight;
var scrollPercentage = (scrollTop / bodyHeight);

// if the scroll is more than 90% from the top, load more content.
if(scrollPercentage > 0.9) {
    // Load content
}

如何动画徽标图像从右到左无限水平？

2 个答案: