在微信小程序 里实现跑马灯效果,类似滚动字幕或者滚动广告之类的,使用简单的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; } /*首页跑马灯效果*/
以上所述是小编给大家介绍的微信小程序跑马灯效果详解整合,希望对大家有所帮助