<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
position: relative;
min-height: 100vh;
background: #000;
}
.typewriting {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.typewriting h2 {
overflow: hidden;
white-space: nowrap;
letter-spacing: 5px;
font: bold 4em TencentSans;
color: #fff;
animation: typing 3s steps(6) forwards;
}
.typewriting::after {
content: "";
display: block;
position: absolute;
top: 0;
right: 0;
width: 2px;
height: 100%;
background: #fff;
animation: blink 1.1s linear infinite;
}
@keyframes blink {
0%,
49% {
opacity: 1;
}
50%,
100% {
opacity: 0;
}
}
@keyframes typing {
0% {
width: 0;
}
100% {
width: 414px;
}
}
</style>
</head>
<body>
<div class="typewriting">
<h2>输入文字特效</h2>
</div>
</body>
</html>