如何实现打字机特效 css3
<style>
div{
font-size: 20px;
width: 0;
height: 30px;
white-space: nowrap;
border-right: 1px solid;
/* 不设定颜色 和字体同颜色 */
/* background-color: pink; */
animation: w 4s steps(10) forwards,
blink 0.3s steps(1) infinite;
overflow : hidden;
}
@keyframes w{
0%{
width: 0;
}
100%{
width: 200px;
}
}
@keyframes blink
{
50%{
border-color: transparent;
}
}
</style>
<body>
<div>
世纪佳缘我在这里等你
</div>
</body>
利用格子大小容纳字体 超出的overflowwhite-space: nowrap将字放在一行上在关键帧 border-color: transparent 将边框透明化 右边框就像打字符号一样了
