如何制作微信小程序中的走马灯效果实例？

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

前言+在日常生活中，我们经常会遇到文字横纵向滚动的效果，俗称走马灯，也是项目中常用的一项功能。在网页前端，这种效果很常见，今天就来介绍下小程式的实现方式，一种是用CS（Client-Side）的方式。

前言

日常开发中，我们经常会遇到文字横向循环滚动的效果，俗称走马灯，也是项目中经常会使用的一个功能。在网页web前端很常见，今天就介绍下小程序的实现方式，一种是用的css样式实现，另一种是运用小程序的动画功能实现。

@keyframes 实现

利用@keyframes的规则来实现，非常方便，只需要css样式就可以满足，使用方法跟web上一样。

<view class="marquee"> <text>这是一段滚动的文字</text> </view>

样式类，from to 来定义动画的开始结束，这里是从屏幕最右端向左滑，触及到最左侧后重新开始新一轮动画。