¿Cómo puedo hacer un efecto de animación de texto, Hello World to HW en JavaScript o CSS?
¡El primer texto es Hello World! Por fin se convierte en HW, con la desaparición de otras letras.
Hola Mundo!
↓
¡Inframundo!
↓
¡Él salvaje!
↓
HW
ingrese la descripción de la imagen aquí
<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> </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>
Revisa la imagen. Tal vez es lo que quieres. Codifique por Vue.js2 y puede copiarlo en Javascript puro