微信小程序里实现跑马灯效果

在微信小程序 里实现跑马灯效果，类似滚动字幕或者滚动广告之类的，使用简单的CSS样式控制，没用到JS

wxml:

<!-- 复制的跑马灯效果 -->

<view class="marquee_container" style="--marqueeWidth--:-12em">
  <view class="bulletin_box_img2">
    <image src="../../images/icon/bulletin.png" alt=""></image>
  </view>
  <view class="marquee_text">积分商城兑换商品将于每月25日集中发货，请耐心等待，介意慎拍</view>
</view>

wxss:

/*首页跑马灯效果*/
@keyframes around {
  from {
   margin-left: 50%;
  }
  to {
   /* var接受传入的变量 */
   margin-left: var(--marqueeWidth--);
  }
  }
   
 .marquee_container{
  background-color: #fff;
  height: 80rpx;
  line-height: 80rpx;
  position: relative;
  width: 100%;
  margin-top:0rpx;
 }
 .marquee_container:hover{
  /* 不起作用 */
  animation-play-state: paused;
 }
 .marquee_text{
  color:#333;
  font-size: 28rpx;
  display: inline-block;
  white-space: nowrap;
  animation-name: around;
  animation-duration: 10s; /*过渡时间*/
  animation-iteration-count: infinite;
  animation-timing-function:linear;
 }
 .bulletin_box_img2{
  position: absolute;
  width: 60rpx;
  height: 54rpx;
  z-index: 9;
  padding-left: 15rpx;
  padding-right: 15rpx;
  margin-top: 14rpx;
  background: #fff;
}
.bulletin_box_img2 image{
  width: 100%;
  height: 100%;
}

参考链接：https://www.jb51.net/article/160412.htm

微信小程序里实现跑马灯效果的相关教程结束。