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

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

html:

数据库运维实战

 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;}}}

效果：

在线效果链接：

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

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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！