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

此时，就已经完成了需要的功能，此处只是以向上滚动为例，其他方向的滚动类似。

如有问题，欢迎留言(・∀・)