如何实现从右到左，从下到上的文本键入动画？

Question

我想制作一个文本动画，如从右到左以及从下到上键入。

如何实现从右到左以及从下到上的动画文本输入。

在顶部，我想从右向左输入，在右边从下至上输入...所以看起来就像在屏幕上输入...

这是我的代码：

 blau(); function blau(){ var elmnt = document.getElementById("myDIV"); var divheight = elmnt.offsetHeight; var divwidth = elmnt.offsetWidth; var dh = Math.floor((divheight / 15)); var dw = Math.floor((divwidth / 16)); var links = dh; var unten = dh + dw; var rechts = unten + dh; var oben = rechts + dw; var ges = ((dh * 2) + (dw * 2)); var i ; var a ; var b ; var c ; var d ; var txta = ''; var txtb = ''; var txtc = ''; var txtd = ''; for (a = 0; a < dh; a++) { txta += "#"; document.getElementById("left").innerHTML = txta; document.getElementById("left").style.visibility = "hidden"; } for (b = 0; b < dw; b++) { txtb += " #"; document.getElementById("bottom").innerHTML = txtb; document.getElementById("bottom").style.visibility = "hidden"; } for (c = 0; c < dh; c++) { txtc += "#"; document.getElementById("right").innerHTML = txtc; document.getElementById("right").style.visibility = "hidden"; } for (d = 0; d < dw; d++) { txtd += "# "; document.getElementById("top").innerHTML = txtd; document.getElementById("top").style.visibility = "hidden"; } animateLeft(dh,dw); } function animateLeft(dh,dw){ var character_count = $('.animated-text-left').text().length; $('.animated-text-left').css('animation', 'left 1s steps(' + dh + ') forwards').css('font-family', 'monospace'); $('<style>@keyframes left {from {height: 0; } to {height: ' + dh + 'ch; } }</style>').appendTo('left'); document.getElementById("left").style.visibility = "visible"; setTimeout( function() { animateBottom(dh,dw); }, 1000); } function animateBottom(dh,dw){ var character_count = $('.animated-text-bottom').text().length; $('.animated-text-bottom').css('animation', 'bottom 1s steps(' + (dw * 3) + ') forwards').css('font-family', 'monospace'); $('<style>@keyframes bottom {from {width: 0; } to {width: ' + (dw * 3) + 'ch; } }</style>').appendTo('bottom'); document.getElementById("bottom").style.visibility = "visible"; setTimeout( function() { animateRight(dh,dw); }, 1000); } function animateRight(dh,dw){ var character_count = $('.animated-text-right').text().length; $('.animated-text-right').css('animation', 'right 1s steps(' + dh + ') forwards').css('font-family', 'monospace').css('float', 'right'); $('<style>@keyframes right {from {height: 0; } to {height: ' + dh + 'ch; } }</style>').appendTo('right'); document.getElementById("right").style.visibility = "visible"; setTimeout( function() { animateTop(dh,dw); }, 1000); } function animateTop(dh,dw){ var character_count = $('.animated-text-top').text().length; $('.animated-text-top').css('animation', 'top 1s steps(' + (dw * 3) + ')').css('font-family', 'monospace').css('float', 'right'); $('<style>@keyframes top {from {width: 0; } to {width: ' + (dw * 3) + 'ch; } }</style>').appendTo('top'); document.getElementById("top").style.visibility = "visible"; } 

  html, body { height:100%; margin:0; padding: 0; } body { padding: 0; margin:0; } .animated-text-left { font-family: monospace; overflow: hidden; word-wrap: break-word; white-space: nowrap; } .animated-text-bottom { font-family: monospace; overflow: hidden; word-wrap: break-word; white-space: nowrap; } .animated-text-right { font-family: monospace; overflow: hidden; word-wrap: break-word; white-space: nowrap; } .animated-text-top { font-family: monospace; overflow: hidden; word-wrap: break-word; white-space: nowrap; } #myDIV { height: 100%; width: 100%; overflow:hidden; background-color: black; } #left { color: white; height: 100%; width: 10px; left:0px; position: absolute; float:left; background-color: black; white-space: pre-wrap; /* CSS3 */ white-space: -moz-pre-wrap; /* Firefox */ white-space: -pre-wrap; /* Opera -7 */ white-space: -o-pre-wrap; /* Opera 7+ */ word-wrap: break-word; /* IE */ } #middle{ width: 100%; height: 100%; margin-left: 10px; margin-right: 10px; margin-bottom: 10px; float: left; position: relative; } #content{ width: 100%; height: 100%; margin-top: 10px; margin-bottom: 10px; position: absolute; } #top { height: 10px; width: 100%; text-align:right; color: white; position: absolute; top: 10; background-color: black; } #contenta { height: 90%; width: 100%; color:white; position: relative; background-color: black; } #contentb { height: 10%; width: 100%; position: relative; color: white; background-color: black; } #bottom { height: 10px; width: 100%; color: white; position: absolute; bottom: 0; background-color: black; } #right { color: white; height: 100%; width: 10px; right:0px; float:right; position: absolute; background-color: black; white-space: pre-wrap; /* CSS3 */ white-space: -moz-pre-wrap; /* Firefox */ white-space: -pre-wrap; /* Opera -7 */ white-space: -o-pre-wrap; /* Opera 7+ */ word-wrap: break-word; /* IE */ } #right span{ width: 10px; right:0px; bottom: 0; position: absolute; } @keyframes typing { from { width: 0; } } @keyframes left { from { height: 0; } } @keyframes bottom { from { width: 0; } } @keyframes right { from { height: 0; } } @keyframes top { from { width: 0; } } .string-highlight{ color: rgba(253, 149, 90, 0.8); } .string-red{ color: red; } .string-at{ color: rgba(253, 149, 90, 0.8); } .string-texta{ color: white; } .string-textb{ color: red; } .string-textc{ color: green; } .string-textd{ color: blue; } .string-dot{ color: blue; } .string-ok{ color: green; } .string-done{ color: green; } .string-connected{ color: green; } .string-klammer{ color: blue; } .string-sysinfo{ color: green; } 

 <!doctype html> <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <meta charset="UTF-8"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name=description content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Getippter Text mit CSS-Animationen</title> </head> <body> <!-- <script src="js.js" ></script> --> <div id="myDIV"> <div id="left" class="animated-text-left" ></div> <div id="middle"> <div id="top" class="animated-text-top"></div> <div id="content"> <div id="contenta" class="animated-texta"> <span > <span style="text-align:right;"> weiterer text</span> </span> </div> <div id="contentb" class="animated-texta"> console </div> </div> <div id="bottom" class="animated-text-bottom"></div> </div> <div id="right" class="animated-text-right"><span></span></div> </div> </body> </html> 

Answer 1

只需将此CSS添加到您的#top

right: 0px; direction: ltr;

这对你来说＃正确

bottom: 0px; direction: ltr;

实时示例： https ： //jsfiddle.net/6xqpo0rv/