用css 现实打字机效果
直接写代码，真正使用注意，一个是 width的值，二是注意在不同浏览器的兼容问题。或者用gif 图片代替
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Repeated Typing Effect</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="typing-effect">
用CSS实现实现打字机效果！！！
</div>
<style>
@keyframes typing {
0% {
width: 0;
}
100% {
width: 100%;
}
}
@keyframes blink-caret {
0%, 100% {
border-color: transparent;
}
50% {
border-color: black;
}
}
.typing-effect {
overflow: hidden;
border-right: 4px solid black;
white-space: nowrap;
width: 550px;
max-width: 550px;
animation: typing 9.5s steps(40, end) forwards, blink-caret 0.75s step-end infinite;
animation-iteration-count: infinite; /* 让打字机效果无限重复 */
font-size: 35px;
background: linear-gradient(to right, #0055ff, #00aaff);
font-weight: 600;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
line-height: 1.5;
}
</style>
</body>
</html>
原文地址：https://blog.csdn.net/weixin_42249565/article/details/145134290
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！