打字效果展示
<template>
<div class="tube">
打字效果展示!
</div>
</template>
<script>
export default {
mounted() {},
methods: {},
};
</script>
<style>
body {
background: none;
font: bold 100% Helvetica, sans-serif;
}
@keyframes typing {
from {
width: 0;
}
}
@keyframes caret {
50% {
border-color: transparent;
}
}
.tube {
position: relative;
left: 10%;
top: 10%;
width: 7em;
height: 1.5em;
overflow: hidden;
white-space: nowrap;
border-right: 1px solid black;
color: black;
animation: 3s typing steps(7),
1s caret steps(1) infinite;
}
</style>