Brevemente
Mediante el uso de la animación (propiedad de animación) de css, se realiza el efecto de máquina de escribir de visualización de texto.
linea sola
tren de pensamiento
Pasos de implementación:
- Establezca las propiedades del cuadro de texto en una fuente monoespaciada, calcule la cantidad de palabras en el cuadro de texto, establezca el tamaño del texto, el diseño relativo, etc.
- Oculte el cuadro de texto, cambie el ancho del cuadro de texto a través de la animación y use los pasos de la función css incorporada () de la curva de velocidad de la animación para convertirse en una animación por pasos, y luego configure el modo de animación hacia adelante para conservar el estilo de el último cuadro de la animación.
- Use el pseudo-elemento after para establecer la propiedad del borde y el diseño absoluto para simular el cursor; luego use la animación para lograr el efecto tenue.
el código
Aquí está la combinación de cambiar el ancho y la animación por pasos para lograr el efecto. La unidad de ancho es em, y el valor se calcula según la cantidad de texto en esta línea.
<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>
Efecto
multilínea
tren de pensamiento
La idea de realización de la máquina de escribir de varias líneas se lleva a cabo sobre la base de una sola línea.
Utilice la propiedad de retraso de la animación para lograr el efecto de la transición de la implementación de una sola línea a la implementación de varias líneas.
Cabe señalar que el procesamiento del cursor es la última línea del cursor que se puede animar infinitamente, y otras líneas pueden especificar el número de ejecuciones de la animación del cursor.
el código
<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>
Efecto
epílogo
El uso principal aquí es la animación de longitud de paso. Además, preste atención a la longitud de una línea de texto y luego cambie la longitud de paso de acuerdo con la longitud. Lo mismo ocurre con las máquinas de escribir de varias líneas, generalmente la última línea requiere un manejo especial.