CSS实现循环无缝滚动

最近看到微信阅读上面的本周推荐卡片的滚动动画效果，就想试试也实现一下。乍一看感觉只要做一下倾斜和移动的动画就可以了，其实主要的难点是如何做到无缝循环。

微信阅读效果

实现思路

• 倾斜

  使用 transform: rotate() 即可

• 滚动

  使用 CSS Animation

  @keyframes move {
      0% {
          transform: translateX(...);
      }
      100% {
          transform: translateX(...);
      }
  }
  

• 无缝循环

  这个是难点。

  首先需要明确的是，动画开始的画面和动画结束的画面应该是同一个画面，这样才能做到无缝循环。

  

  为此，需要增加一些重复的元素在末尾，作为衔接下次循环的过渡。

  两个要素：

  1. 增加足够的重复元素在原队列的末尾，这些重复元素是开头的那几个。
  2. 计算一个完整队列走完的长度，这个长度就是一次循环画面偏移的距离。

实现效果

demo

codepen.io/youngmaxer/…

参考

• 《Build an Infinite Scrolling Photo Banner With HTML and CSS》designshack.net/articles/cs…