Efecto de máquina de escribir HTML ejemplo de código de codepen continuo

Te recomendamos que pruebes esta respuesta en un entorno controlado antes de pasarlo a producción, un saludo.

Ejemplo: wirte effect css

<p class="line-1 anim-typewriter">Animation typewriter style using css steps()</p><style>/* Google Fonts */
@importurl(https://fonts.googleapis.com/css?family=Anonymous+Pro);/* Global */
html
  min-height:100%;
  overflow: hidden;
body
  height:calc(100vh -8em);
  padding:4em;
  color:rgba(255,255,255,.75);
  font-family:'Anonymous Pro', monospace;  
  background-color:rgb(25,25,25);.line-1
    position: relative;
    top:50%;  
    width:24em;
    margin:0 auto;
    border-right:2px solid rgba(255,255,255,.75);
    font-size:180%;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    transform:translateY(-50%);/* Animation */.anim-typewriter
  animation: typewriter 4s steps(44)1s 1 normal both,
             blinkTextCursor 500ms steps(44) infinite normal;
@keyframes typewriterfromwidth:0;
  towidth:24em;
@keyframes blinkTextCursorfromborder-right-color:rgba(255,255,255,.75);
  toborder-right-color: transparent;</style>

Si crees que te ha sido de utilidad nuestro post, agradeceríamos que lo compartas con el resto programadores así contrubuyes a extender nuestro contenido.

---

---

Utiliza Nuestro Buscador