CSS + JS 實現打字機效果

Himmelbleu發表於2024-03-24
CSSJS

實現效果

title:(打字機效果原始碼) cover:(https://img2020.cnblogs.com/blog/1957096/202005/1957096-20200527110106198-1974765350.jpg) link:(https://github.com/Himmeltala/web-learning/tree/main/03.examples/%E6%89%93%E5%AD%97%E6%9C%BA)
引數名稱 描述 預設值
texts 列印文字陣列，依次列印，一段文字結束之後將從頭開始 -
typingSpeed 列印速度，從文字開始到結束列印的速度 100
eraseSpeed 回退速度，從文字結束到開始回退的速度 20
eraseDelay 列印一段文字之後，停留多久開始回退 2000
blinkSpace 游標距離文字末尾處的距離 5 
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>打字機效果</title>
  </head>
  <body>
    <div id="typewriter" class="typewriter"></div>
    <script>
      // ... 原始碼詳見 Github 倉庫
      const texts = [
        "你好，很高興認識你，接下來將自我介紹，",
        "我是一個 Web <Developer />，",
        "技術棧：Vue.js、React.js，",
        "喜歡日漫、遊戲，",
        "座右銘：Time tick away, dream faded away!",
      ];

      const typewriter = new Typewriter({ texts });
      typewriter.type();
    </script>
  </body>
</html>

相關文章