详解微信小程序实现跑马灯效果（附完整代码）

2019-11-19 11:41:13

字体：大中小

来源：转载

供稿：网友

在微信小程序里实现跑马灯效果，类似滚动字幕或者滚动广告之类的，使用简单的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;}/*首页跑马灯效果*/

以上所述是小编给大家介绍的微信小程序跑马灯效果详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对武林网网站的支持！

上一篇：深入浅析Vue 中 ref 的使用

下一篇：vue中利用simplemde实现markdown编辑器（增加图片上传功能）