This content originally appeared on DEV Community and was authored by Jorge Muñoz
Hoy quiero compartir con ustedes un proyecto divertido que desarrollé utilizando HTML y CSS puro para crear un efecto interactivo animado y lleno de color en texto.
💡 ¿Qué hace este código? He diseñado un efecto en el que cada letra de un nombre cambia de color y revela una animación al pasar el mouse. Es un enfoque visual que combina creatividad y tecnología, perfecto para interfaces modernas o elementos destacados en sitios web.
📌 Características del código:
- Totalmente basado en HTML y CSS (sin JavaScript 🟢).
- Uso de variables CSS (--color, --font-size, etc.) para garantizar una personalización rápida.
- Animaciones fluidas y efectos visuales gracias a hover y transition.
👨💻 Aquí tienes una vista previa del código:
HTML
<div class="name">
<div class="jlmunozfdev" data-text="J">
<span>J</span>
</div>
<div class="jlmunozfdev" data-text="L">
<span>L</span>
</div>
<div class="jlmunozfdev" data-text="M">
<span>M</span>
</div>
<div class="jlmunozfdev" data-text="U">
<span>U</span>
</div>
<div class="jlmunozfdev" data-text="N">
<span>N</span>
</div>
<div class="jlmunozfdev" data-text="O">
<span>O</span>
</div>
<div class="jlmunozfdev" data-text="Z">
<span>Z</span>
</div>
<div class="jlmunozfdev" data-text="F">
<span>F</span>
</div>
<div class="jlmunozfdev" data-text="D">
<span>D</span>
</div>
<div class="jlmunozfdev" data-text="E">
<span>E</span>
</div>
<div class="jlmunozfdev" data-text="V">
<span>V</span>
</div>
</div>
CSS
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap");
:root {
--size: 120px;
--font-size: 4rem;
}
body {
box-sizing: border-box;
--background: #240046;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: var(--background);
font-family: "Poppins", sans-serif;
}
.name {
position: relative;
display: flex;
}
.name .jlmunozfdev {
position: relative;
cursor: pointer;
height: var(--size);
display: flex;
justify-content: center;
align-items: center;
--color: #c879ff;
}
.name .jlmunozfdev:nth-child(2) {
--color: #c879ff;
}
.name .jlmunozfdev:nth-child(3) {
--color: #f26419;
}
.name .jlmunozfdev:nth-child(4) {
--color: #f26419;
}
.name .jlmunozfdev:nth-child(5) {
--color: #80ed99;
}
.name .jlmunozfdev:nth-child(6) {
--color: #80ed99;
}
.name .jlmunozfdev:nth-child(7) {
--color: #e3f2fd;
}
.name .jlmunozfdev:nth-child(8) {
--color: #e3f2fd;
}
.name .jlmunozfdev:nth-child(9) {
--color: #ffd300;
}
.name .jlmunozfdev:nth-child(10) {
--color: #ffd300;
}
.name .jlmunozfdev:nth-child(11) {
--color: #ffd300;
}
.name .jlmunozfdev span {
font-size: var(--font-size);
font-weight: 700;
-webkit-text-stroke: 2px var(--color);
color: transparent;
transition: 0.5s;
}
.name .jlmunozfdev:hover span {
opacity: 0;
}
.name .jlmunozfdev::before {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 100%;
font-size: var(--font-size);
height: 0;
font-weight: 700;
overflow: hidden;
transition: 0.6s ease-in-out;
text-align: center;
line-height: var(--size);
color: var(--color);
}
.name .jlmunozfdev:hover::before {
height: 100%;
filter: drop-shadow(0 0 2rem var(--color));
}
Código del Proyecto
📚 Aprendizajes: Este proyecto refuerza cómo CSS avanzado puede transformar la experiencia visual y hacer más interactivos los elementos de una página web.
¡Un ejemplo perfecto de cómo pequeños detalles marcan la diferencia!
This content originally appeared on DEV Community and was authored by Jorge Muñoz
Jorge Muñoz | Sciencx (2025-01-09T17:45:00+00:00) 🚀 Creando Animaciones Interactivas con CSS y HTML ✨. Retrieved from https://www.scien.cx/2025/01/09/%f0%9f%9a%80-creando-animaciones-interactivas-con-css-y-html-%e2%9c%a8/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.