CSS 打字特效 - 技术栈

效果图

.wxml

复制代码

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

.wxss

css 复制代码

.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

javascript 复制代码

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，很少看博客，对你有帮助别忘记点赞收藏。