Hiệu ứng gõ và xóa văn bản với JavaScript và CSS

Với CSS animation, tạo hiệu ứng máy đánh chữ gõ và xóa văn bản bằng JavaScript.

Ví dụ

<!DOCTYPE html> <html> <style> div {    display: flex;    margin: 4%;    padding: 2%;    box-shadow: inset 0 0 12px blue; } p {    font-family: "Courier Monospace";    font-size: 2em;    color: red; } p:last-of-type {    animation: type 0.33s infinite; } @keyframes type{    to { opacity: .0; } } </style> <body> <div> <p id="text"></p> <p>|</p> </div> <script> const words = ["Nulla", "facilisi", "Cras sed odio sed leo laoreet molestie id non purus.."]; let i = 0; let counter; function typeNow() {    let word = words[i].split("");    var loopTyping = function() {       if (word.length > 0) {          document.getElementById('text').innerHTML += word.shift();       } else {          deleteNow();          return false;       };       counter = setTimeout(loopTyping, 200);    };    loopTyping(); }; function deleteNow() {    let word = words[i].split("");    var loopDeleting = function() {       if (word.length > 0) {          word.pop();          document.getElementById('text').innerHTML = word.join("");       } else {          if (words.length > (i + 1)) {             i++;          }          else {             i = 0;          };          typeNow();          return false;       };       counter = setTimeout(loopDeleting, 200);    };    loopDeleting(); }; typeNow(); </script> </body> </html>

Kết quả

Hiệu ứng gõ/xóa văn bản liên tục như máy đánh chữ.