我还应该从 animation 的代码中添加/推断什么？
[英]What else should I add/deduce from the code of animation?
问题描述
It's another question on animation in JS / CSS.
这是关于 animation in JS / CSS 的另一个问题。
I'd like to ask how should I correct the code in JavaScript, in order to achieve the visual effect that, after a screen full of random characters, all the lines of random characters will disappear, with only the black background, while a new line of random characters starts generating at the top of the screen?请问JavaScript中的代码应该如何修改，才能达到满屏乱码后，乱码行全部消失，只有黑色背景，同时新的视觉效果一行随机字符开始在屏幕顶部生成？ I thought it would be a solution that, after the characters in the div element fill up the whole screen, the height can be a reference to trigger the function of .removeChild() , in order to remove the appended p elements.我想这样的解决方案是，在div元素中的字符填满整个屏幕后，可以以高度为参考触发.removeChild()的function，从而移除附加的p元素。 After that, by .appendChild() it will start the generation process again at the top of the screen.之后，通过.appendChild()它将在屏幕顶部再次开始生成过程。 If not so, Is there any other ways to do it?如果不是这样，还有其他方法吗？
Thank you very much!非常感谢你！
Code:代码：
function create_random_string(string_length) { var random_string = ''; var characters = 'ABCDEFGabcdefg'; 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, 11000); function NewLine() { let text = document.createElement("p"); text.setAttribute("id", "text"); text.innerHTML = create_random_string(15); divElem.appendChild(text); } function RemoveChild() { if (divElem.clientHeight > window.innerHeight) { while (divElem.firstChild) { divElem.removeChild(divElem.firstChild) }; } }
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: 7.5vh; } #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 10s steps(15) forwards; } #text::after { width: 0.125em; bottom: 0vh; Top: 0vh; background: #ffffff; animation: TypingBar 10s 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.99% { left: 89.5vw; opacity: 1; } /* escape fade-in effect */ 100% { opacity: 0; } /* hide trailing cursor */ } @keyframes blink { to { background: transparent; } }
<body> <div id="container"> <p id="text"></p> </div> </body>
1 个解决方案
解决方案1
1 已采纳 2022-05-26 02:59:09
function create_random_string(string_length) { var random_string = ''; var characters = 'ABCDEFGabcdefg'; 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, 11000); function NewLine() { RemoveChild(); let text = document.createElement("p"); text.setAttribute("id", "text"); text.innerHTML = create_random_string(15); divElem.appendChild(text); } function RemoveChild() { if (divElem.clientHeight > window.innerHeight) { divElem.innerHTML =""; } }
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: 7.5vh; } #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 10s steps(15) forwards; } #text::after { width: 0.125em; bottom: 0vh; Top: 0vh; background: #ffffff; animation: TypingBar 10s 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.99% { left: 89.5vw; opacity: 1; } /* escape fade-in effect */ 100% { opacity: 0; } /* hide trailing cursor */ } @keyframes blink { to { background: transparent; } }
<body> <div id="container"> <p id="text"></p> </div> </body>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.