代码自用自取，复制粘贴直接使用，喜欢的话可以查看博主其它文章，贡献一丢丢的浏览量，感激不尽。
CSS是前端非常重要的技术也是对于前端熟练度的考察。很多的后端程序员表示在学习前端知识的时候，JS其实不是强有力的拦路虎，众多的实践证明CSS才是后端程序员最烦恼的技术。所以，CSS是咱们前端程序员稳住饭碗的技术。
学好CSS从我做起！
今天我们用CSS实现一下打字的效果，这个还是比较好玩的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 100%;
height: 229px;
display: flex;
justify-content: center;
align-items: center;
}
span {
display: inline-block;
width: 21ch;
font: bold 200% Consolas, Monaco, monospace; /*等宽字体*/
overflow: hidden;
white-space: nowrap;
font-weight: 500;
border-right: 1px solid transparent;
animation: typing 10s steps(21), caret .5s steps(1) infinite;
}
@keyframes typing{
from {
width: 0;
}
}
@keyframes caret{
50% {
border-right-color: currentColor}
}
</style>
</head>
<body>
<div class="main">
<span>关注Code程序人生微信公众号~~~</span>
</div>
</body>
</html>
效果：
点赞、关注、收藏都是对作者莫大的鼓励，感谢！
个人QQ：505417246
关注下面微信公众号，可以领取微信小程序、Vue、TypeScript、Web前端基础、uniapp、Nodejs、Python、Java等学习资料
