🚀 Creando Animaciones Interactivas con CSS y HTML ✨

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!