css 实现输入效果

<template>

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

</template>

<script>

export default {

}

</script>

<style lang="scss">

body {

    background: black;

    color: #fff;

}

h1 {

    font: bold 200% Consolas, Monaco, monospace;

    border-right: 0.1em solid;

    width: 16.5em;

    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;

    }

}

</style>

转自： https://csscoco.com/inspiration/#/./border/border-typing.md