我想制作一个文本动画，如从右到左以及从下到上键入。
如何实现从右到左以及从下到上的动画文本输入。
在顶部，我想从右向左输入，在右侧从下至上输入...所以看起来就像在屏幕上输入...
这是我的代码：
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>最佳答案
只需将此CSS添加到您的#top
right: 0px; direction: ltr;
这对你来说＃正确
bottom: 0px; direction: ltr;
现场示例：
https://jsfiddle.net/6xqpo0rv/