如何在js/css中将光标动画到下一个新行并生成另一行新字符？

Question

我想再问一次这个问题，毕竟我在 2 个月前写下了这么多乱七八糟的东西。

下面的代码显示了一个字母动画。理想的视觉效果是，一旦我进入这个页面，就会有一个黑色背景和一个白色光标，它开始生成一行随机字符，一个一个地跟随白色光标整行。之后，光标将在下面的新行上，并开始生成新的一行随机字符，方法与上一行相同。这样的过程会自行进行下去。

问题是，我不知道如何将光标移动到下面的新行，并开始生成新行的随机字符。

感谢所有曾经帮助过我的人，也感谢所有可能在未来帮助我的人！非常感谢！

index.html:

<html>
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="styles.css">
  </head>
  <body>
    <div id="container">
      <p id="text"></p>
  </div>
    <script src="script.js"></script>
  </body>
</html>

script.js:

const text = document.getElementById('text');
text.innerHTML += create_random_string(15) + '<br>';

function create_random_string(string_length){
  var random_string = '';
  var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
  for (var i, i = 0; i < string_length; i++) {
     random_string += characters.charAt(Math.floor(Math.random() * characters.length));
  }
  return random_string; 
}

var MyInterval = setInterval(NewLine, 21000);
function NewLine() {
  text.innerHTML += create_random_string(15) + '<br>';
}

function StopNewLine() {
  clearInterval(MyInterval);
}
StopNewLine();

style.css:

body {
  background-color: #000000;
  margin: 0;
  padding: 0;
  overflow: hidden;
  display: grid;
  height: 100vh;
  width: 100vw;
}

#container {
  place-content: center;
  text-align: center;
  line-height: 6vh;
}

#text {
  font-family: 'Courier New', Courier, monospace;
  font-size: 4vw;
  letter-spacing: 3vw;
  font-weight: bold;
  color: #ffffff;
  position: relative;
}

#text::before,
  #text::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }

  #text::before {
    background: #000000;
    animation: typewriter 20s steps(15) forwards;
  }

  #text::after {
    width: 0.125em;
    bottom: 1.5vh;
    Top: 1vh;
    background: #ffffff;
    animation: TypingBar 20s steps(15) forwards,
      blink 750ms steps(15) infinite;
  }

  @keyframes typewriter {
    0% {left: 0;}
    6.7% {left: 7vw;}
    100% {left: 90vw;}
  } 

  @keyframes TypingBar {
    0%, 6.7% {left: 8vw;}
    100% {left: 89.5vw;}
  }

  @keyframes blink {
    to {
      background: transparent;
    }
  }

Answer 1

对id="text"的元素执行一次动画。您可以做的是在每次函数调用时创建一个带有 id="text" 的新元素，这将为该元素执行动画：

let divElem = document.getElementById('container');
function NewLine() {
  let text = document.createElement("p");
  text.setAttribute("id", "text");
  text.innerHTML = create_random_string(15) + '<br>'; 
  divElem.appendChild(text);
}

唯一的问题是行尾有一个尾随闪烁的光标，我用 opacity: 0;:

隐藏了它

  @keyframes TypingBar {
    0%, 6.7% {left: 8vw;}
    99% {left: 89.5vw; opacity: 1;} /* escape fade-in effect */
    100% {opacity: 0;} /* hide trailing cursor */
  }

function create_random_string(string_length){
  var random_string = '';
  var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
  for (var i, i = 0; i < string_length; i++) {
     random_string += characters.charAt(Math.floor(Math.random() * characters.length));
  }
  return random_string; 
}

let divElem = document.getElementById('container');
NewLine();

var MyInterval = setInterval(NewLine, 21000);
function NewLine() {
  let text = document.createElement("p");
  text.setAttribute("id", "text");
  text.innerHTML = create_random_string(15) + '<br>'; 
  divElem.appendChild(text);
}

function StopNewLine() {
  clearInterval(MyInterval);
}
//StopNewLine();

body {
  background-color: #000000;
  margin: 0;
  padding: 0;
  overflow: hidden;
  display: grid;
  height: 100vh;
  width: 100vw;
}

#container {
  place-content: center;
  text-align: center;
  line-height: 6vh;
}

#text {
  font-family: 'Courier New', Courier, monospace;
  font-size: 4vw;
  letter-spacing: 3vw;
  font-weight: bold;
  color: #ffffff;
  position: relative;
}

#text::before,
  #text::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }

  #text::before {
    background: #000000;
    animation: typewriter 20s steps(15) forwards;
  }

  #text::after {
    width: 0.125em;
    bottom: 1.5vh;
    Top: 1vh;
    background: #ffffff;
    animation: TypingBar 20s steps(15) forwards,
      blink 750ms steps(15) infinite;
  }

  @keyframes typewriter {
    0% {left: 0;}
    6.7% {left: 7vw;}
    100% {left: 90vw;}
  } 

  @keyframes TypingBar {
    0%, 6.7% {left: 8vw;}
    99% {left: 89.5vw; opacity: 1;}
    100% {opacity: 0;}
  }

  @keyframes blink {
    to {
      background: transparent;
    }
  }

<html>
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="styles.css">
  </head>
  <body>
    <div id="container">
      <p id="text"></p>
  </div>

  </body>
</html>

如何在js/css中将光标动画到下一个新行并生成另一行新字符？

How to animate the cursor to the next new line and generate another new lines of characters in js / css?

javascript

css

animation

css-animations