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
