Briefly
By using the animation (animation property) of css, the typewriter effect of text display is realized.
single line
train of thought
Implementation steps:
- Set the properties of the text box to a monospaced font, calculate the number of words in the text box, set the text size, relative layout, etc.
- Hide the text box, change the width of the text box through animation, and use the built-in css function steps() of the animation speed curve to become a step-length animation, and then set the animation mode to forwards to retain the style of the last frame of the animation.
- Use the pseudo-element after to set the border property and absolute layout to simulate the cursor; then use animation to achieve the faint effect.
the code
Here is the combination of changing width and step animation to achieve the effect. The width unit is em, and the value is calculated according to the amount of text in this line.
<template>
<div class="container">
<div class="text__box one">这是一个打字机效果1！！！</div>
<!-- <div class="text__box two">这是一个打字机效果2！！！</div>
<div class="text__box three">这是一个打字机效果3！！！</div>
<div class="text__box four">这是一个打字机效果4！！！</div> -->
</div>
</template>
<script lang="ts" setup>
import {
reactive, ref, toRefs, onBeforeMount, onMounted, computed } from "vue";
</script>
<style lang="scss" scoped>
.container {
position: relative;
margin-top: 100px;
margin-left: 100px;
}
.text__box {
position: relative;
overflow: hidden;
width: 0;
font-size: 32px;
line-height: 34px;
font-family: "Courier New", Courier, monospace;
white-space: nowrap;
animation: width 2s steps(13) forwards;
&::after {
content: "";
position: absolute;
right: 0px;
height: 32px;
border-right: 1px solid #000;
animation: showInfinite 0.5s infinite both;
}
}
.one {
animation-delay: 0s;
}
@keyframes width {
0% {
width: 0;
}
100% {
width: 13em; // 单位em,表示一个字体的宽度
}
}
@keyframes showInfinite {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
</style>
Effect
Multi-line
train of thought
The realization idea of multi-line typewriter is carried out on the basis of single line.
Use the animation delay property to achieve the effect of transitioning from single-line implementation to multi-line implementation.
It should be noted that the processing of the cursor is the last line of the cursor that can be animated infinitely, and other lines can specify the number of executions of the cursor animation.
the code
<template>
<div class="container">
<div class="text__box one">这是一个打字机效果1！！！</div>
<div class="text__box two">这是一个打字机效果2！！！</div>
<div class="text__box three">这是一个打字机效果3！！！</div>
<div class="text__box four">这是一个打字机效果4！！！</div>
</div>
</template>
<script lang="ts" setup>
import {
reactive, ref, toRefs, onBeforeMount, onMounted, computed } from "vue";
</script>
<style lang="scss" scoped>
.container {
position: relative;
margin-top: 100px;
margin-left: 100px;
}
.text__box {
position: relative;
overflow: hidden;
width: 0;
font-size: 32px;
line-height: 34px;
font-family: "Courier New", Courier, monospace;
white-space: nowrap;
animation: width 2s steps(13) forwards;
&::after {
content: "";
position: absolute;
right: 0px;
height: 32px;
border-right: 1px solid #000;
animation: showInfinite 0.5s 5 both; // 执行5次
}
}
.one {
animation-delay: 0s;
}
.two {
animation-delay: 2s;
&::after {
animation-delay: 2s;
}
}
.three {
animation-delay: 4s;
&::after {
animation-delay: 4s;
}
}
.four {
animation-delay: 6s;
&::after {
animation-delay: 6s;
animation: showInfinite 0.5s infinite both;
}
}
@keyframes width {
0% {
width: 0;
}
100% {
width: 13em; // 单位em,表示一个字体的宽度
}
}
@keyframes showInfinite {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
</style>
Effect
epilogue
The main use here is the step length animation. In addition, pay attention to the length of a line of text, and then change the step length according to the length. The same is true for multi-line typewriters, generally the last line requires special handling.