純css3實現文字間歇滾動效果

場景：

假設有4條數據或者標題，視口中只顯示兩條，采用每次向上滾動一條數據來展示所有的數據。效果如圖：

用JavaScript也很容易實現，但是需要操作DOM，可以參考這篇博客。考慮到項目中經常使用Vue，已經很少操作DOM了，所以考慮最好通過CSS來實現，可以通過Vue給模板元素動態綁定class來實現相同的功能，如果需要考慮css3兼容性的話，可以去使用JavaScript去完成。

主要用到了css3的兩個屬性：@framekeys和animation

通過 @keyframes 規則，能夠創建動畫。創建動畫的原理是，將一套 CSS 樣式逐漸變化為另一套樣式。

animation能夠將動畫與元素綁定。

注意：由於視口中顯示兩條數據，所以要把最前面的兩行數據拼接在所有最后面，主要是為了避免一次動畫完成之后即所有的數據都已經滾動到視口的上方，等待下一次動畫的過程中會有空白出現的現象，把最前面的兩行數據拼接在最后面，當除了拼接的數據以外的其他數據滾動到視口上方時，拼接的數據臨時占位等待下一次動畫出現，不至於出現空白。

HTML代碼如下：

<div>
    <ul>
        <li>第一行</li>
        <li>第二行</li>
        <li>第三行</li>
        <li>第四行</li>
        <li>第一行</li>
        <li>第二行</li>
    </ul>
</div>

使用less編寫樣式代碼如下：

//必須給定的參數
@height:30px;//每次滾動的距離
@num:4;//需要滾動多少條數據
@animatinTime:5s;//多長時間完成所有數據的向上滾動一次

//可選的參數
@delayRatio:4;
@upRatio:1;//延遲滾動時間和滾動一條數據所用到的時間之比

//內部計算使用到的變量，不需要對其賦值
@ratioSum:@delayRatio+@upRatio;
@eachSum:1/@num;
@everyUpTime:@eachSum*@upRatio/@ratioSum*100;
@everyDelayTime:@eachSum*@delayRatio/@ratioSum*100;

//使用循環生成@keyframes動畫的時間節點
.myLoop(@counter,@everyUpTime:1,@everyDelayTime:4,@height:30px,@i:0,@index:0) when(@i < @counter){
  @start:percentage(@i/100);
  @{start}{
    -webkit-transform: translateY(-@index*@height);
    transform: translateY(-@index*@height);
  }
  @end:percentage((@i+@everyDelayTime)/100);
  @{end}{
    -webkit-transform: translateY(-@index*@height);
    transform: translateY(-@index*@height);
  }
  .myLoop(@counter,@everyUpTime,@everyDelayTime,@height,(@i+@everyDelayTime+@everyUpTime),(@index+1));
}

//調用循環，生成@keyframes
@keyframes scroll {
  .myLoop(100,@everyUpTime,@everyDelayTime,@height,0,0);
  @end:percentage(1);
  @{end}{
    -webkit-transform: translateY(-@num*@height);
    transform: translateY(-@num*@height);
  }
}

//封裝成mixin，方便在其他需要動畫的位置調用
.scroll(){
  -webkit-animation: scroll @animatinTime infinite;
}

//舉例
div{
  width: 200px;
  height: 60px;
  overflow: hidden;
}
ul{
  height: 100%;
  width: 100%;
  .scroll();
}
li{
  line-height: 30px;
  height: 30px;
}

編譯后的css代碼為：

@keyframes scroll {
  0% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
  20% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
  25% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  45% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  50% {
    -webkit-transform: translateY(-60px);
    transform: translateY(-60px);
  }
  70% {
    -webkit-transform: translateY(-60px);
    transform: translateY(-60px);
  }
  75% {
    -webkit-transform: translateY(-90px);
    transform: translateY(-90px);
  }
  95% {
    -webkit-transform: translateY(-90px);
    transform: translateY(-90px);
  }
  100% {
    -webkit-transform: translateY(-120px);
    transform: translateY(-120px);
  }
}
div {
  width: 200px;
  height: 60px;
  overflow: hidden;
}
ul {
  height: 100%;
  width: 100%;
  -webkit-animation: scroll 5s infinite;
}
li {
  line-height: 30px;
  height: 30px;
}

此時，就已經完成了需要的功能，此處只是以向上滾動為例，其他方向的滾動類似。

 

如有問題，歡迎留言(・∀・)