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

本文主要是介绍微信小程序里实现跑马灯效果，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

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

这篇关于微信小程序里实现跑马灯效果的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！