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…