在微信小程序 里實現(xiàn)跑馬燈效果，類似滾動字幕或者滾動廣告之類的，使用簡單的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;}/*首頁跑馬燈效果*/以上所述是小編給大家介紹的微信小程序跑馬燈效果詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對VEVB武林網(wǎng)網(wǎng)站的支持！
新聞熱點
疑難解答
