写两个class为rowup的标签,是为了衔接显示,不然等待时间过长,
<view class="list">
<view class="rowup">
<view class="single_text col-blue2">
<view class="dis-flex jus-spa">
<view class="">
张**
</view>
<view class="">
133****4555
</view>
</view>
</view>
<view class="single_text col-blue2">
<view class="dis-flex jus-spa">
<view class="">
张**
</view>
<view class="">
133****4555
</view>
</view>
</view>
<view class="single_text col-blue2">
<view class="dis-flex jus-spa">
<view class="">
张**
</view>
<view class="">
133****4555
</view>
</view>
</view>
<view class="single_text col-blue2">
<view class="dis-flex jus-spa">
<view class="">
张**
</view>
<view class="">
133****4555
</view>
</view>
</view>
<view class="single_text col-blue2">
<view class="dis-flex jus-spa">
<view class="">
张**
</view>
<view class="">
133****4555
</view>
</view>
</view>
</view>
<view class="rowup">
<view class="single_text col-blue2">
<view class="dis-flex jus-spa">
<view class="">
张**
</view>
<view class="">
133****4555
</view>
</view>
</view>
<view class="single_text col-blue2">
<view class="dis-flex jus-spa">
<view class="">
张**
</view>
<view class="">
133****4555
</view>
</view>
</view>
<view class="single_text col-blue2">
<view class="dis-flex jus-spa">
<view class="">
张**
</view>
<view class="">
133****4555
</view>
</view>
</view>
<view class="single_text col-blue2">
<view class="dis-flex jus-spa">
<view class="">
张**
</view>
<view class="">
133****4555
</view>
</view>
</view>
<view class="single_text col-blue2">
<view class="dis-flex jus-spa">
<view class="">
张**
</view>
<view class="">
133****4555
</view>
</view>
</view>
</view>
</view>
@keyframes rowup {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
100% {
-webkit-transform: translate3d(0, -307upx, 0);
transform: translate3d(0, -307upx, 0);
}
}
.list{
width: 100%;
position: relative;
height: 140upx;
overflow: hidden;
}
.list .rowup{
box-sizing: border-box;
-webkit-animation: 20s rowup linear infinite normal;
animation: 20s rowup linear infinite normal;
position: relative;
}