在微信小程序 里實現跑馬燈效果，類似滾動字幕或者滾動廣告之類的，使用簡單的CSS樣式控制，沒用到JS，效果如下圖：

Wxml代碼：

<!--跑馬燈 Linyufan.com--><view class="marquee_container" style="--marqueeWidth--:-12em">  <view class="marquee_text">一個人活著就是為了讓更多的人更好的活著！</view></view><!--跑馬燈-->

 Wxss代碼：

/*首頁跑馬燈效果*/@keyframes around { from {  margin-left: 100%; } to {  /* var接受傳入的變量 */  margin-left: var(--marqueeWidth--); } } .marquee_container{ background-color: #fe4655; height: 50rpx; line-height: 44rpx; position: relative; width: 100%; margin-top:0rpx;}.marquee_container:hover{ /* 不起作用 */ animation-play-state: paused;}.marquee_text{ color:#fff; font-size: 28rpx; display: inline-block; white-space: nowrap; animation-name: around; animation-duration: 10s; /*過渡時間*/ animation-iteration-count: infinite; animation-timing-function:linear;}/*首頁跑馬燈效果*/

以上所述是小編給大家介紹的微信小程序跑馬燈效果詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對錯新站長站網站的支持！