En este tutorial, aprenderás a crear un efecto visual impresionante de un bot escribiendo mensajes en tiempo real, usando únicamente HTML y CSS. Ideal para chatbots, interfaces de mensajería o sitios web interactivos. ¡No necesitas JavaScript!
Requisitos previos
Estructura HTML básica
Comienza con una estructura simple para el contenedor del chat y el mensaje del bot.
<div class="chat-container">
<div class="message bot-message">
<span class="typing-indicator">
<span class="typing-dots"></span>
Mensaje del bot se está escribiendo...
</span>
</div>
</div>
Estilos CSS base
Define los estilos para el contenedor y el mensaje del bot.
.chat-container {
max-width: 400px;
margin: 50px auto;
font-family: Arial, sans-serif;
}
.bot-message {
background: #007bff;
color: white;
padding: 15px;
border-radius: 20px;
margin: 10px 0;
position: relative;
}
.typing-indicator {
display: inline-block;
overflow: hidden;
border-right: 2px solid transparent;
}
Animación de escritura (Typing Effect)
Usa @keyframes para simular la escritura progresiva del texto.
.typing-indicator {
animation: typing 3s steps(40, end), blink-caret 0.75s step-end infinite;
white-space: nowrap;
border-right: 2px solid white;
}
@keyframes typing {
from { width: 0; }
to { width: 100%; }
}
@keyframes blink-caret {
from, to { border-color: transparent; }
50% { border-color: white; }
}
Efecto de puntos de escritura
Agrega puntos animados para indicar que el bot está 'pensando'.
.typing-dots {
display: inline-block;
width: 20px;
}
.typing-dots::after {
content: ' . . .';
animation: dots 1.5s steps(5, end) infinite;
}
@keyframes dots {
0%, 20% { content: ' . . .'; }
40% { content: ' . .'; }
60% { content: ' .'; }
80%, 100% { content: ''; }
}
Código completo
Aquí tienes el HTML y CSS completo para copiar y pegar.
<!DOCTYPE html>
<html lang="es">
<head>
<style>
/* Pega aquí todos los estilos anteriores */
</style>
</head>
<body>
<div class="chat-container">
<div class="message bot-message">
<span class="typing-indicator">
¡Hola! Este es un efecto de bot escribiendo con CSS puro.
</span>
</div>
</div>
</body>
</html>
Personalización avanzada
¡Prueba el efecto en tu proyecto y comparte tus resultados en los comentarios! 🚀
¿Quieres comentar?
Inicia sesión con Telegram para participar en la conversación