放眼望去，水田已被一莲花覆盖，鲜艳的红色水滴随雨水流下，半溶解的花海在彩霞中无边无际地延伸，抬头仰望，之间峥嵘的山峰在山腹间吐出薄薄的春云。
发现一个有趣的东西，就是使用纯CSS代码实现打字机的效果。所谓的打字机效果就是控制一个字符串字符，并且字符串中的每个一个字符一个接着一个的出现。
纯CSS实现文字的打印机效果，要用到 animation 动画元素，下面先上示例代码。
CSS实现文字打印机效果的方法
1、先上效果图
2、示例代码
<style>
.main {
height: 80vh;
display: flex;
align-items: center;
justify-content: center;
}
.content {
width: 450px;
white-space: nowrap;
overflow: hidden;
border-right: 3px solid;
font-family: monospace;
font-size: 2em;
animation: go 4s steps(22), off .5s step-end infinite alternate;
}
@keyframes go {
from {
width: 0;
}
}
@keyframes off {
50% {
border-color: transparent;
}
}
</style>
<div class="main">
<div class="content"> http://feiniaomy.com</div>
</div> 到此这篇关于CSS如何实现打字机效果的方法就介绍到这了。健康没有捷径，来自点滴习惯的养成；养生只能自学，随时保持学习的状态。更多相关CSS如何实现打字机效果的方法内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！
