如何解决如何仅使用CSS和HTML进行换行符的打字机效果？
如何仅使用css和html用换行符实现打字机效果？
我正在建立个人网站，并正在尝试将某些元素添加到我想要的网站上 而且我对CSS动画很感兴趣 我想用两行做一台打字机但是有三件事是错误的：
•文本没有完成（由于某种原因，它不是dylxntn而是dylxn，而程序员成为了程序）
•时机不对，我无法把握时机
•第二行删除，然后重写自身，而不仅仅是编写自身
而这些事情是我所知道的唯一错误的事情，可能有些我不知道的事情。
.css-typing h1{
overflow: hidden;
white-space: nowrap;
border-right: 4px solid rgb(255,255,255);
width: 11ch;
animation: type 3s steps(11,end);
-webkit-animation: type 3s steps(11,end);
animation-iteration-count: infinite;
}
@keyframes type{
0% {
width: 0ch;
}
20% {
width: 11ch;
}
}
.css-typingtwo h1{
overflow: hidden;
white-space: nowrap;
border-right: 4px solid rgb(255,255);
width: 16ch;
animation: type2 3s steps(16,end);
-webkit-animation: type2 3s steps(16,end);
animation-iteration-count: infinite;
}
@keyframes type2{
40% {
width: 16ch;
}
80% {
width: 1ch;
}
} <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Document</title>
</head>
<body bgcolor="black">
<div class="css-typing">
<font color="white"><h1>I'M <font color="red">DYLXNTN</font></h1></font>
</div>
<div class="css-typingtwo">
<font color="white"><h1>I'M A PROGRAMMER</h1></font>
</div>
</body>
</html>版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
