border-color 变换实现文字输入效果码字特效

Jimxx

于 2022-11-24 17:17:55 发布

阅读量93

点赞数

文章标签：前端 css html

本文链接：https://blog.csdn.net/Jimxx/article/details/128022737

版权

利用 border-right 实现光标闪烁

html

<h1>Pure CSS Typing animation.</h1>

css

body {
    background: black;
    color: #fff;
}

h1 {
    font: bold 200% Consolas, Monaco, monospace;
    border-right: 0.1em solid;
    width: 26ch;
    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;
    }
}