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

Time:04-28

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

First Text is Hello World! At last, become HW, with disapearing other letters.

Hello World!

Hell World!

He Wld!

HW

CodePudding user response:

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 >
     <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>

Check the image. Maybe it's what you want. Code by Vue.js2 and you can copy it in pure Javascript

  • Related