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

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

 

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