文字移动（从左往右）

1、html 部分

<div id="app"> <div class="move_box"> <div class="move"> <div class="move_item gradient_color" v-text="text" :style="{transform: `translateX(-${moveVal}px)`}"> el: "#app", data: { moveData: [], text: '', moveVal: 0, fontSize: 26, widths: 0, count: 0 }, mounted() { this.getData(); }, methods: { // 获取数据 getData() { let that = this; axios.get('../json/dataJson.json').then(({ data: { textMove } }) => { let newData = []; // 因为获取到的数据与想要的数据结构不同 // 所以需要处理 textMove.forEach(item => { let str = ""; item.content.forEach(items => { str += items; }); newData.push(str); }); that.moveData = newData; that.translateX(); }) }, translateX() { // 此函数的属性顺序不能修改 let that = this, fontSize = that.fontSize, count = that.count, moveData = that.moveData; // 通过下标给显示内容的字段赋值 that.text = moveData[that.count]; // 计算下次获取的数据下标 // 通过数组长度计算重置数组下标 that.count = count > moveData.length - 2 ? 0 : count += 1; // 通过文字大小和文字长度计算盒子宽度 that.widths = fontSize * that.text.length; let interval = setInterval(() => { // 向左移动的距离 that.moveVal += 1; // 56 的作用 // 1、确保向左移动的距离能完全隐藏文字 // 2、达到时间间隔作用 if (that.moveVal >= that.widths + 56) { // 重置定位值为 0 that.moveVal = 0; // 清除定时器 clearInterval(interval); // 重置 text 的值 // 如果不重置会出现闪现效果 that.text = ''; // 递归调用 that.translateX(); } }, 20); } } }); 

3、css 部分

.move_box { width: 370px; background-color: #888888; border-radius: 7px; display: flex; justify-content: center; align-items: center; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); } .move { width: 90%; position: relative; overflow: hidden; height: 50px; line-height: 50px; background-color: #666666; } .move_item { position: absolute; white-space: nowrap; font-size: 26px; } .gradient_color { background-image: -webkit-linear-gradient(bottom, #FFFFFF, #FFB90F); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } 

4、说明

1. 需要自己下载 vue 和 axios 导入页面 2. 演示属于移动端的微信小程序，会与 PC 端不同，代码逻辑不同，实现思路和逻辑不同，结果也会有所不同，功能基本一致。本文章以 PC 端为准 3. WX：MJ2506562048

5、演示