純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;
}

此時，就已經完成了須要的功能，此處只是以向上滾動爲例，其餘方向的滾動相似。

 

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