css+js to achieve text typewriter effect
Rendering:
html code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="./index.css"/>
</head>
<body>
<h1></h1>
<div>
<p>><span>[root@VM-0-9-centos~]#</span>:"<i>rm -rf/关于小伍的记忆</i>"</p>
<p>> <span>[root@VM-0-9cnetos~]#</span>:"<i>删除成功</i>"</p>
<p>> <span>[root@VM-0-9cnetos~]#</span>:<b>文件备份自动其中中...
:<a href="">备份失败</a>,<a href="">仅</a><a href="">文件备份</a><a href="">碎片</a></b></p>
<p>> <span>[root@VM-0-9cnetos~]#</span>:"<i>文件碎片正在加载...</i>"</p>
<p>> <span>[root@VM-0-9cnetos~]#</span>:"<i>加载成功 正在打开...</i>"</p>
</div>
</body>
<script src="./index.js" type="text/javascript" charset="utf-8"></script>
</html>
css code:
*{
margin: 0;
padding: 0;
border: 0;
font-size:100%;
font:inherit;
vartical-align:baseline;
box-sizing: border-box;
color: inherit;
}
body{
background-color: linear-gradient(120deg,#4f0088 100%,#000000 100%);
height: 100vh;
}
h1{
font-size: 45vm;
text-align: center;
position: fixed;
width: 100vw;
z-index: 1;
color: #ffffff26;
text-shadow: 0 0 50px rgba(0,0,0,0.07);
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
font-family: "Montserrat",monospace;
}
div{
background-color: rgba(0,0,0,0);
width: 70vw;
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
margin: 0 auto;
padding: 30px 30px 10px;
box-shadow: 0 0 150px -20px rgba(0,0,0,.5);
z-index: 3;
}
p{
font-family: "Share Tech Mono",monospace;
color: #f5f5f5;
margin: 0 0 20px;
font-size: 17px;
line-height: 1.2;
}
span{
color: #f0c674;
}
i{
color: #8abeb7;
}
div a{
text-decoration: none;
}
b{
color: #81a2be;
}
a.avatar{
position: fixed;
bottom: 15px;
right: -100px;
-webkit-animation: slide 0.5s 4.5s forwards;
animation: slide 0.5s 4.5s forwards;
display: block;
z-index: 4;
}
a.avatar img{
border-radius: 100%;
width: 44px;
border: 2px solid white;
}
@-webkit-keyframes slide{
from{
right: -100%;
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
opacity: 0;
}
to{
right: 15px;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
opacity: 1;
}
}
@keyframes slide{
from{
right: -100%;
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
opacity: 0;
}
to{
right: 15px;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
opacity: 1;
}
}
js code:
var str = document.getElementsByTagName('div')[0].innerHTML.toString();
var i = 0;
document.getElementsByTagName('div')[0].innerHTML = "";
setTimeout(function() {
var se = setInterval(function() {
i++;
document.getElementsByTagName('div')[0].innerHTML = str.slice(0, i) + "|";
if (i == str.length) {
clearInterval(se);
document.getElementsByTagName('div')[0].innerHTML = str;
}
}, 30)
}, 0);
Summarize:
The main principle of realizing the effect of text typewriter is to obtain the element nodes (label nodes, content nodes) that need to be output, and continuously add them to the element nodes that need to be output at a certain time interval.