利用 CSS3 animation - stops 来实现打字效果

利用  CSS3 animation - stops 来实现打字效果

 div 代码：

 <div>fsdfsdfsdsdf fsdfsd</div>

css代码：

    实现思路是： 我要利用伪对象做遮罩层 来实现效果

        div{
            position: relative; 
            display: inline-block;
            height: 100px;
            line-height: 100px;
            font-size: 80px;
            /* background-color: aqua; */
            font-family: monospace;
            /* 关键  一定要选择这个字体 因为字体的大小都是一样的*/
        }
        @keyframes leftTop {
            0%{
                
                border-left-color: #fff;
            }
            50%{
             
                border-left-color: #000;
            }
            100%{
                border-left-color: #fff;
            }
        }
        @keyframes move{
            0%{
                left: 0;
            }
            100%{
                left: 100%;
            }
        }

        div