如何编写代码实现微信小程序跑马灯效果详解？

更新于

2026-10-02 07:11:38

2阅读来源：SEO资源

内容介绍
文章标签
相关推荐

本文共计497个文字，预计阅读时间需要2分钟。

在微信小程序中实现跑马灯效果，类似滚动字幕或滚动广告，可以使用简单的CSS样式控制，无需使用JavaScript。以下是一个示例：

+Wxml代码：欢迎使用Linyufan.com，体验便捷的服务。

+Wxml样式：css/* 跑马灯容器样式 */.marquee_container { overflow: hidden; white-space: nowrap; width: 100%; /* 根据需要调整宽度 */}

/* 跑马灯文本样式 */.marquee_text { display: inline-block; padding-left: 100%; /* 设置内容长度为容器的两倍，实现滚动效果 */ animation: marquee 10s linear infinite;}

/* 动画关键帧 */@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-100%); }}

此代码创建了一个跑马灯效果，内容会从右向左滚动，不断循环。调整动画持续时间、宽度和其他CSS属性，可以满足不同的需求。

在微信小程序里实现跑马灯效果，类似滚动字幕或者滚动广告之类的，使用简单的CSS样式控制，没用到JS，效果如下图：

Wxml代码：

<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; } /*首页跑马灯效果*/

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

标签：详解微信小程序实现