0

如何使用仅使用 css 和 html 的换行符来实现打字机效果？

我正在制作一个个人网站，并且正在尝试在我的网站上制作我想要的某些元素，我对 css 动画很感兴趣，我想用两行打字机

但是有三件事是错误
的： • 文本没有完成（而不是 dylxntn，它变成了 dylxn，并且由于某种原因程序员变成了程序）
• 时间不正确，我无法得到正确的时间
• 第二行删除然后重写自己，而不仅仅是写作本身
，这些事情是我唯一知道错的事情，可能有一些我不知道的事情。

    .css-typing h1{
      overflow: hidden;
      white-space: nowrap;
      border-right: 4px solid rgb(255, 255, 255);
      width: 11ch;
      animation: type 3s steps(11, end);
      -webkit-animation: type 3s steps(11, end);
      animation-iteration-count: infinite;
    }

    @keyframes type{
      0% {
          width: 0ch;
      }
      20% {
          width: 11ch;
      }
    }

    .css-typingtwo h1{
      overflow: hidden;
      white-space: nowrap;
      border-right: 4px solid rgb(255, 255, 255);
      width: 16ch;
      animation: type2 3s steps(16, end);
      -webkit-animation: type2 3s steps(16, end);
      animation-iteration-count: infinite;
    }

    @keyframes type2{
      40% {
          width: 16ch;
      }
      80% {
          width: 1ch;
      }
    } 
<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        
    </head>
    <body bgcolor="black">
        <div class="css-typing">
          <font color="white"><h1>I'M <font color="red">DYLXNTN</font></h1></font>
        </div>
        <div class="css-typingtwo">
          <font color="white"><h1>I'M A PROGRAMMER</h1></font>
        </div>
    </body>
    </html>

4

0 回答 0