小程序文字上下滚动轮播效果实现CSS

wxml 

<view class="demo-list">

      <view class="rowup">

        <view class="item">1- 这是一句话</view>

        <view class="item">2- 这是一句话</view>

        <view class="item">3- 这是一句话</view>

        <view class="item">4- 这是一句话</view>

        <view class="item">5- 这是一句话</view>

        <view class="item">6- 这是一句话</view>

        <view class="item">7- 这是一句话</view>

        <view class="item">8- 这是一句话</view>

        <view class="item">9- 这是一句话</view>

        <view class="item">10- 这是一句话</view>

        <view class="item">11- 这是一句话</view>

      </view>

    </view>

wxss

@-webkit-keyframes rowup {

  0% {

      -webkit-transform: translate3d(0, 0, 0);

      transform: translate3d(0, 0, 0);

  }

  100% {

      -webkit-transform: translate3d(0, -307px, 0);

      transform: translate3d(0, -307px, 0);

  }

}

@keyframes rowup {

  0% {

      -webkit-transform: translate3d(0, 0, 0);

      transform: translate3d(0, 0, 0);

  }

  100% {

      -webkit-transform: translate3d(0, -307px, 0);

      transform: translate3d(0, -307px, 0);

  }

}

.demo-list{

  width: 300px;

  border: 1px solid #999;

  margin: 20px auto;

  position: relative;

  height: 200px;

  overflow: hidden;

}

.demo-list .rowup{

  -webkit-animation: 10s rowup linear infinite normal;

  animation: 10s rowup linear infinite normal;

  position: relative;

}

效果展示：https://www.xiabingbao.com/demo/css3-infinite-scroll/simple.html

参考：https://www.cnblogs.com/shimily/articles/10313791.html