微信小程序文字跑马灯效果

1.样式

/*首页跑马灯效果开始*/
.container_marquee {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
}

.scrolltxt {
  padding: 0rpx;
  background: #FF7F2D;
}

.marquee_box {
  position: relative;
  height: 60rpx;
  display: block;
  overflow: hidden;
}

.marquee_text {
  color: #fff;
  font-size: 26rpx;
  display: inline-block;
  white-space: nowrap;
  animation-name: around;
  animation-duration: 10s;
  /*过渡时间*/
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  height: 60rpx;
  line-height: 60rpx;
}

/*首页跑马灯效果*/
@keyframes around {
  from {
    margin-left: 100%;
  }

  to {
    /* var接受传入的变量 */
    margin-left: 0;
  }
}
/*首页跑马灯效果结束*/

2.页面中使用

  <scroll-view class="container_marquee">
    <view class="scrolltxt">
      <view class="marquee_box">
        <view class="marquee_text">
          <text>跑马灯文字</text>
        </view>
      </view>
    </view>
  </scroll-view>