CSS 打字特效

效果图

.wxml

 {{ tipsText }} |

.wxss

.tips{ padding: 50rpx 100rpx; font-size: 28rpx;}.tips-line{ color: #ccc; animation: tips-line .5s alternate infinite;}@keyframes tips-line{ from{ opacity: 0; } to{ opacity: 1; }}

.js

Page({ data: { tipsText:\'\' }, executeTips(){ const that = this const tipsArr = [ \'写下你的一个梦想，并思考实现它的第一步。\', \'尝试用新的方式来解决一个旧问题。\', ],len = tipsArr.length - 1; let i = -1,key = 0,type = 0,o,max,tipsText = \'\'; function fn(){ if(type === 0){ i = i < len ? i + 1 : 0 o = tipsArr[i] max = o.length type = 2 fn() } else if(key < max || type === 1){ setTimeout(() => { if(type === 2) tipsText += o[key],key++ else tipsText = tipsText.slice(0,tipsText.length - 1),key-- that.setData({ tipsText }) if(key === 0) type = 0 fn() }, type * 100) } else setTimeout(() => { type = 1,fn() },2000) } fn() }, onLoad(){ this.executeTips() }})

遇到问题可以看我主页加我Q，很少看博客，对你有帮助别忘记点赞收藏。