每天一个css动效之文字输入效果

作者: 前端小白加一枚 | 来源:发表于2019-03-18 19:01 被阅读0次

使用border-color实现文字输入效果

关键点在于 border-right 实现光标闪烁

实现代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>border-color实现文字输入效果</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            body{
                background: antiquewhite;
                color: #333333;
            }
            h1{
                font: bold 200% Consolas, Monaco, monospace;
                border-right: 1px solid #333;
                width: 15em;
                margin: 2em 1em;
                white-space: nowrap;
                overflow: hidden;
                animation: typing 3s steps(26, end),
                    cursor-blink 0.3s step-end infinite alternate;
            }
            @keyframes typing {
                from {
                    width: 0;
                }
            }
            
            @keyframes cursor-blink {
                50% {
                    border-color: transparent;
                }
            }
        </style>
    </head>
    <body>
        <h1>border-color实现文字输入效果</h1>
    </body>
</html>