在微信小程序中实现跑马灯效果,比如滚动字幕或者滚动广告,使用简单的CSS样式控制,不用JS,效果如下:
Wxml代码:
!-marquee linyufan.com-view class=' marquee _ container ' style='-marquee width-:-12em ' view class=' marquee _ text '独居就是让更多的人生活得更好!/view/view!-ticker - Wxss代码:
/*主页滚动条效果*/@在{ from { margin-left : 100% }周围的关键帧;} to {/* var接受传入的变量*/margin-left : var(-marquee width-);} } .marquee _ container { background-color : # Fe 4655;高度: 50 rpx;线高: 44 rpx;相对位置:宽度: 100%;margin-top :0 rpx;}.marquee _ container :悬停{/*不起作用*/动画-播放-状态:暂停;}.marquee _ text { color: # ffffont-size : 28 rpx;display:内联块;white-space : nowrap;动画-名字:左右;动画-时长10s/*过渡时间*/动画-迭代-count:无限;动画-定时-函数:线性;}/*首页跑马灯效果*/以上是边肖介绍的微信小程序跑马灯效果的详细讲解和整合,希望对大家有所帮助。如果你有任何问题,请给我留言,边肖会及时回复你。非常感谢您对我们网站的支持!