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

在微信小程序 里实现跑马灯效果，类似滚动字幕或者滚动广告之类的，使用简单的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