打字机 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            body{
                height: 100vh;
                background-color: lightgray;
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
            }
            div{
                font-size: 40px;
                text-transform: capitalize;
                position: relative;
            }
            /* 文字上面的遮罩 */
            div::after{ /* 伪元素是一个文字元素inline */
                content: "";
                width: 100%;
                height: 100%;
                background-color: lightgray;
                position: absolute;
                left: 0;
                border-left: 5px solid black;
                /* 改变盒子宽高的描述对象 : 
                  为了解决左边框增加盒子宽度，导致位移距离改变，
                  使文字显示时出现细小的偏差 */
                box-sizing: border-box;
                animation: scroll 5s infinite steps(calc(10 + 1)),
                           flash 1s infinite steps(1);
            }
            @keyframes scroll{
                from{
                    transform: translateX(0px);
                }
                to{
                    transform: translateX(calc(100% + 40px));
                }
            }
            @keyframes flash{
                from{border-left: 5px solid black;}
                50%{border-left: 5px solid lightgray;}
                to{border-left: 5px solid lightgray;}
            }
        </style>
    </head>
    <body>
        <div>你好啊，大帅哥段锐！</div>
    </body>
</html>
posted @ 2023-01-02 18:15  不尽人意的K  阅读(66)  评论(0)  编辑  收藏  举报