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

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

标签：marquee,微信,100%,程序,height,跑马灯,animation,margin
来源： https://www.cnblogs.com/zhainverer/p/15675070.html