它是那样的舒展,那样高雅。特别是盛夏时节,热青奔放,有粉的,白的,紫的……,互不相让,竟相开放,它们好象正在表演一场时装表演。在巨大的碧绿的荷叶上,小水珠滚来滚去,偶尔一些小青蛙跳上一片荷叶,把荷叶当做歌台。在陽光的照耀下,水珠闪闪发光,显得楚楚动人。
在微信小程序 里实现跑马灯效果,类似滚动字幕或者滚动广告之类的,使用简单的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; } /*首页跑马灯效果*/
以上所述是小编给大家介绍的微信小程序跑马灯效果详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
以上就是详解微信小程序实现跑马灯效果(附完整代码)。人生之路无须过多准备,只要迈动双脚,路就在你脚下延伸;只要扬帆,就会有八面来风。更多关于详解微信小程序实现跑马灯效果(附完整代码)请关注haodaima.com其它相关文章!