CSS文字上下无限滚动 用于奖励记录

先看效果图

直接上代码

wxml页面

<view class="swiper_rise">
            <view class="charm animation5">
                <view>
                    <view class="item" wx:for="{{5}}" wx:key="index">
                        <text>2月{{index}}日</text>
                        <text class="marginleft_30 webkit-line-clamp-1">“丐帮帮主”已中奖</text>
                    </view>
                </view>
                <view>
                    <view class="item" wx:for="{{5}}" wx:key="index">
                        <text>2月{{index}}日</text>
                        <text class="marginleft_30 webkit-line-clamp-1">“丐帮帮主”已中奖</text>
                    </view>
                </view>
            </view>
        </view>

wxcc样式

.swiper_rise{
  height: 260rpx;
  margin-top: 40rpx;
  border: 20rpx solid #FFBE9A;
  border-radius: 8rpx;
  background: #FFDFCD;
  padding: 0 40rpx;
  position: relative;
}
.charm{
  position: relative;
}
.animation5{
  animation: item_move 5s linear infinite;
}
.animation10{
  animation: item_move 10s linear infinite;
}
.animation20{
  animation: item_move 20s linear infinite;
}

@keyframes item_move {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0);
  }
}

.swiper_rise .charm .item{
  display: flex;
  align-items: center;
  font-size: 32rpx;
  color: #3A3333;
  margin-top: 28rpx;
}

不需要js代码，兄弟 就是这么帅气