【无标题】纯css手写打字动画+倾斜效果（文本字体逐渐显示动画效果）

最近项目遇到一个动画，看了下网上很多js写的很复杂，还有问题，于是整理了超级简单的一个倾斜文本打字效果供大家参考,话不多说，直接上代码

html:

<div class="text-two absolute">
      <p class="add-length">数据库运维实战</p>
</div>

 css部分：

 

            .text-two {
                font-size: .44rem;
                width: 4rem;
                height: .8rem;
                line-height: .8rem;
                top: 12.08rem;
                left: 5rem;
                letter-spacing: .02rem;
                color: rgb(194, 194, 194);
                overflow: hidden; //c超出部分的文本隐藏
                transform: rotate(4deg); //倾斜效果
                padding-left: .36rem;
            }
            .add-length {
                height: .8rem;
                line-height: .8rem;
                animation: addlength 2s infinite;
                @keyframes addlength {
                    0% {
                        width: .02rem;
                    }
                    20% {
                        width: 1.4rem;
                    }
                    40% {
                        width: 2rem;
                    }
                    60% {
                        width: 3rem;
                    }
                    80% {
                        width: 4rem;
                    }
                    100% {
                        width: 5rem;
                    }
                }
            }

效果：

在线效果链接：

掌握一门核心技能是职场的关键 - 数据库训练营

怎么样，是不是超级简单！遇到动画不要慌 ，不要万事想着度娘，自己想想也许有更简单的方法哦！喜欢点点赞！