用css 现实打字机效果

来自云龙湖轮廓分明的月亮 · 2025-1-15 07:32:54

您需要登录才可以下载或查看，没有账号？立即注册

x

直接写代码，真正使用注意，一个是 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>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

		自动登录	找回密码
密码			立即注册

0 个回复