En el pasado, para lograr el efecto de escribir en una computadora, era necesario js+html. Hoy presentaré un nuevo método. Este artículo presenta principalmente la html+cssrealización pura del efecto de escritura, que tiene un cierto valor de referencia. Puedes aprenderlo. Todos los códigos se proporcionan y se pueden utilizar directamente.
1. Análisis de principios
La animación se puede considerar como tres niveles distintos:
- texto inferior
- Un fondo que bloquea el texto en el medio.
- cursor superior
El texto es estático, mientras que el fondo en el medio y el cursor en la capa superior son dinámicos.
Inicialmente, el fondo bloquea todo el texto y el cursor está en el extremo izquierdo.
A medida que avanza la animación, el fondo y el cursor se mueven de izquierda a derecha al mismo ritmo.
Cuando finaliza la animación, el fondo ya no bloquea el texto y el cursor parpadea en el extremo derecho.
La única ventaja de esta implementación es que no requiere js, pero la desventaja es que solo se puede usar para una línea de texto, y teóricamente se puede implementar texto de varias líneas, pero es más problemático.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Typing effect without js</title>
<style>
:root {
/* number of characters */
--steps: 345;
/* animation time */
--duration: 2.5s;
--fontSize: 50px;
--cursorSize: 20px;
}
.text {
color: #333;;
position: relative;
display: inline-block;
font-family: 'Courier New', Courier, monospace;
font-size: var(--fontSize);
line-height: 1;
}
.text::after {
content: '';
width: var(--cursorSize);
height: var(--fontSize);
background-color: black;
z-index: 2;
position: absolute;
animation: blink 1s var(--duration) step-end infinite,
moveCursor var(--duration) steps(var(--steps)) forwards;
}
.text::before {
content: '';
width: 100%;
height: var(--fontSize);
z-index: 1;
position: absolute;
background: linear-gradient(#fff, #fff) no-repeat top right;
animation: showText var(--duration) steps(var(--steps)) forwards;
}
/* Cursor blink animation */
@keyframes blink {
0% {
background-color: black;
}
50% {
background-color: transparent;
}
100% {
background-color: black;
}
}
/* Cursor movement animation */
@keyframes moveCursor {
0% {
left: 0%;
}
100% {
left: 100%;
}
}
/* background moving animation */
@keyframes showText {
0% {
background-size: 100% 100%;
}
100% {
background-size: 0% 100%;
}
}
</style>
</head>
<body>
<div class="text">hello,world!</div>
</body>
</htm>Dos, javascript para lograr el efecto de escritura 1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Typing effect with js</title>
</head>
<body>
<div style="font-size: 36px;" id="text">hello,world!</div>
<script>
var str = 'In the past, to achieve an effect similar to typing on a computer,js+html was required. Today I will introduce a new method.';
var i = 0;
function typing(){
var divTyping = document.getElementById('text');
if (i <= str.length) {
divTyping.innerHTML = str.slice(0, i++) + '_';
setTimeout('typing()', 200);
}
else{
divTyping.innerHTML = str;
}
}
typing();
</script>
</body>
</html>
Tres, javascript para lograr el efecto de escritura 2
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Typing effect with js</title>
<style>
.divcss5{word-wrap:break-word;font-size: 36px;}
</style>
</head>
<body>
<div class="divcss5" id="aa">
In the past, to achieve an effect similar to typing on a computer, js+html was required. Today I will introduce a new method.This article mainly
</div>
<div style="display:none" id="w">
In the past, to achieve an effect similar to typing on a computer, js+html was required. Today I will introduce a new method.This article mainly introduces pure html+css to achieve typing effect, which has certain reference value, you can learn about it. Provide all the code, you can use it directly.
</div>
<script language="javascript">
var index=0;
var word=document.getElementById("w").innerHTML;
function type(){
document.getElementById("aa").innerText = word.substring(0,index++);
}
setInterval(type, 200);
</script>
</body>
</html>Finalmente, se les da una juerga de front-end a todos [Jiajun Yang: 581286372] para ayudar a todos a aprender mejor.
