CSS 打字特效

效果图

.wxml

<view class="tips"><text>{{ tipsText }}</text><text class="tips-line">|</text>
</view>

.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 = thisconst 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 : 0o = tipsArr[i]max = o.lengthtype = 2fn()} 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 = 0fn()}, type * 100)}else setTimeout(() => { type = 1,fn() },2000)}fn()},onLoad(){this.executeTips()}
})

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