如何在JavaScript或CSS中制作文本动画效果，Hello World到HW？

Question

第一个文本是 Hello World！最后变成HW，其他字母都消失了。

你好世界！

↓

地狱世界！

↓

他在世界！

↓

硬件

Answer 1

enter image description here

<script>
export default {
    name:"Introduction",
    data() {
        return {
            timer:1,
        }
    },

    mounted() {
      this.deathLoop = null
      this.deathLoop = setInterval(()=>{
        this.timer+=1
        if(this.timer>4) this.timer=1
      },1000)
    },
}
</script>

<style scoped>
.Introduction{
    padding-top: 60px;
    height: 100%;
    width: 100%;
    color: #333;
    font-size: 20px;
}
span{
    font-size: 30px;
    height: 20px;
    line-height: 20px;
    margin-top: 10px;

}
</style>

<template>
  <div class="Introduction">
     <span >H</span>
     <span v-show="timer<4">e</span>
     <span v-show="timer<3">l</span>
     <span v-show="timer<3">l</span>
     <span v-show="timer<2">o</span>
     <span>&nbsp;&nbsp;</span>
     <span >W</span>
     <span v-show="timer<3">o</span>
     <span v-show="timer<3">r</span>
     <span v-show="timer<4">l</span>
     <span v-show="timer<4">d</span>
     <span v-show="timer<4">!</span>
  </div>
</template>

检查图像。也许这就是你想要的。由 Vue.js2 编写的代码，您可以在纯 Javascript

中复制它

如何在JavaScript或CSS中制作文本动画效果，Hello World到HW？

How Can I Make Text Animation Effect, Hello World to HW in JavaScript or CSS?

javascript

css

animation