使用 HTML 和 CSS 实现文本输入动画效果
AWS 安全直播！
有时候，你可能想要一些炫酷的文字动画，比如打字机动画，它能营造出一种黑客风格。你可以将这种动画添加到作品集中展示，或者添加到你的企业首页。它能让网站看起来更加精致。
在网站上添加一些动画效果，就能让它瞬间吸引眼球。创建动画的方法有很多，其中一种就是为文字添加打字效果。打字机动画制作起来非常快捷，而且效果显著，能让你的网站看起来格外引人注目。
如何将其转换为
HTML 代码：
<div id="typing">I AM A <span>WEB DESIGNER</span></div>
<div id="crow">|</div>
CSS代码：
body{background:black;
margin-top:200px;
margin-left:50px;}
#typing {
width: 0ch;
color: white;
float: left;
font-family: sans-serif;
font-weight:bold;
font-size: 60px;
overflow: hidden;
white-space: nowrap;
animation: typing 5s steps(22) 1s infinite alternate;
}
#typing span{
color:red;}
#crow {
float: left;
color: white;
font-family: consolas;
font-weight:bold;
font-size: 60px;
animation: crow 0.5s linear 0s infinite;
}
@keyframes typing {
from {
width: 0ch;
}
to {
width: 25ch;
}
}
@keyframes crow {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
下载源代码：点击此处{Google 云端硬盘}
观看视频教程：点击此处{YouTube}
文章来源：https://dev.to/monalishamondol/text-typing-animation-effect-using-html-css-3d52