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

最新推荐文章于 2024-07-30 18:36:42 发布

邱铁牛

最新推荐文章于 2024-07-30 18:36:42 发布

阅读量738

点赞数

文章标签： css 小程序滚动动画

本文链接：https://blog.youkuaiyun.com/qiuqiang748/article/details/106761585

版权

CSS 同时被 2 个专栏收录

6 篇文章

订阅专栏

原生微信小程序

4 篇文章

订阅专栏

先看效果图

在这里插入图片描述

直接上代码

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