Desarrollo de una Página de Año Nuevo con Efectos CSS3

Este proyecto demuestra cómo construir una página interactiva de Año Nuevo utilizando HTML5, CSS3 y JavaScript. Se emplean características avanzadas de CSS como gradientes lineales, sombras de caja, bordes estilizados y pseudo-elementos para crear animaciones visuales atractivas.

La estructura del documento incluye secciones para diferentes estados de la página, un reproductor de música y elementos decorativos.


<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fiesta de Año Nuevo</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="control-musical">
        <img class="activo" id="disco" src="img/disco.png" alt="Control de música">
        <img src="img/puntero.png" alt="Puntero">
    </div>

    <div class="seccion" id="inicio">
        <div class="fondo"></div>
        <div class="linterna">Toque para iniciar<br>¡Feliz Año Nuevo!</div>
        <div class="logo"></div>
        <div class="saludo">Deseamos un próspero 2025</div>
    </div>

    <div class="seccion" id="medio">
        <div class="fondo"></div>
        <div class="anillo"></div>
        <div class="año">2025</div>
    </div>

    <div class="seccion" id="final">
        <div class="fondo"></div>
        <div class="titulo">Éxito y Prosperidad</div>
        <div class="arte"></div>
        <div class="pareado-izquierdo"></div>
        <div class="pareado-derecho"></div>
        <div class="fortuna"></div>
    </div>

    <audio autoplay loop>
        <source src="audio/fiesta.mp3">
    </audio>
    <script src="app.js"></script>
</body>
</html>

Se utilizan selectores avanzados y propeidades de diseño para crear efectos visuales. La propiedad box-sizing ajusta el modelo de caja, y los pseudo-elementos ::before e ::after generan elementos decorativos sin HTML adicional.

/* Reset general */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; }

/* Control musical */
#control-musical {
    position: fixed;
    top: 20px;
    right: 15px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 3px solid #e63946;
    background: #f1faee;
    z-index: 100;
}
#control-musical img:first-of-type {
    position: absolute;
    width: 40px;
    margin: 5px;
    cursor: pointer;
}
#control-musical img:last-of-type {
    position: absolute;
    top: 10px;
    right: 0;
    width: 14px;
}
#control-musical img.activo {
    animation: girar-disco 3s linear infinite;
}
@keyframes girar-disco {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Secciones de página */
.seccion {
    position: absolute;
    width: 100%;
    height: 100%;
    display: none;
}
.seccion.activa { display: block; }
.seccion .fondo {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
}
#inicio .fondo { background: url(img/fondo-inicio.jpg) no-repeat center/cover; }
#medio .fondo { background: url(img/fondo-medio.jpg) no-repeat center/cover; }
#final .fondo { background: url(img/fondo-final.jpg) no-repeat center/cover; }

/* Estilos específicos de la sección de inicio */
#inicio .linterna {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 140px;
    height: 300px;
    background: url(img/linterna.png) no-repeat center/contain;
    padding-top: 120px;
    text-align: center;
    color: #fff;
    font-size: 18px;
}
#inicio .linterna::before {
    content: '';
    position: absolute;
    top: 90px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, #ff6b6b, transparent);
    border-radius: 50%;
    animation: pulsar 0.8s ease-in-out infinite alternate;
}
@keyframes pulsar {
    from { opacity: 0.6; transform: translateX(-50%) scale(0.9); }
    to { opacity: 1; transform: translateX(-50%) scale(1); }
}
#inicio .logo {
    position: absolute;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    width: 90px;
    height: 100px;
    background: url(img/logo.png) no-repeat center/contain;
}
#inicio .saludo {
    position: absolute;
    bottom: 30px;
    width: 100%;
    text-align: center;
    font-size: 16px;
}

/* Estilos de la sección media */
#medio {
    transition: opacity 0.5s, transform 0.5s;
}
#medio.desvanecer {
    opacity: 0.3;
    transform: translateY(-100%);
}
#medio .anillo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: url(img/anillo-externo.png) no-repeat center/contain;
    animation: rotar-externo 2s linear infinite;
}
#medio .anillo::before {
    content: '';
    position: absolute;
    top: 15px;
    left: 15px;
    width: 170px;
    height: 170px;
    border-radius: 50%;
    background: url(img/anillo-medio.png) no-repeat center/contain;
    animation: rotar-medio 1.5s linear infinite reverse;
}
#medio .anillo::after {
    content: '';
    position: absolute;
    top: 30px;
    left: 30px;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: url(img/anillo-interno.png) no-repeat center/contain;
    animation: rotar-interno 1s linear infinite;
}
#medio .año {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 40px;
    font-weight: bold;
    color: #457b9d;
}
@keyframes rotar-externo { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes rotar-medio { to { transform: translate(-50%, -50%) rotate(-720deg); } }
@keyframes rotar-interno { to { transform: translate(-50%, -50%) rotate(1080deg); } }

/* Estilos de la sección final */
#final {
    transition: transform 0.5s;
}
#final.desplazar {
    transform: translateY(-100%);
}
#final .titulo {
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    width: 170px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    font-size: 22px;
    font-weight: bold;
    color: #d62828;
    background: linear-gradient(45deg, #fdf0d5, #c9b458);
    box-shadow: 5px 5px 15px rgba(0,0,0,0.2);
    border: 4px groove #a8201a;
}
#final .arte {
    position: absolute;
    top: 120px;
    left: 50%;
    transform: translateX(-50%);
    width: 150px;
    height: 250px;
    background: url(img/arte.png) no-repeat center/contain;
}
#final .pareado-izquierdo, #final .pareado-derecho {
    position: absolute;
    top: 150px;
    width: 70px;
    height: 240px;
    background: url(img/pareado.png) no-repeat center/contain;
}
#final .pareado-izquierdo { left: 20px; }
#final .pareado-derecho { right: 20px; }
#final .fortuna {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: 90px;
    height: 90px;
    background: url(img/fortuna.png) no-repeat center/contain;
    animation: girar-fortuna 4s linear infinite;
}
@keyframes girar-fortuna { to { transform: translateX(-50%) rotate(360deg); } }

El script gestiona la interación del usuario, cnotrolando la reproducción de audio y la transición entre secciones de la página.

// Referencias a elementos del DOM
const discoControl = document.getElementById('disco');
const audioElement = document.querySelector('audio');
const seccionInicio = document.getElementById('inicio');
const seccionMedio = document.getElementById('medio');
const seccionFinal = document.getElementById('final');

// Control del reproductor de música
discoControl.addEventListener('click', () => {
    if (audioElement.paused) {
        audioElement.play();
        discoControl.classList.add('activo');
    } else {
        audioElement.pause();
        discoControl.classList.remove('activo');
    }
});

// Navegación entre secciones
seccionInicio.addEventListener('click', () => {
    seccionInicio.classList.remove('activa');
    seccionMedio.classList.add('activa');
    seccionFinal.classList.add('activa');
    seccionFinal.style.top = '100%';

    // Iniciar transiciones después de un retraso
    setTimeout(() => {
        seccionMedio.classList.add('desvanecer');
        seccionFinal.classList.add('desplazar');
        seccionFinal.style.top = '0';
    }, 5000);
});

Etiquetas: CSS3 Animations HTML5 Structure JavaScript DOM Manipulation responsive design CSS Gradients

Publicado el 6-30 20:53

Friki Work

Desarrollo de una Página de Año Nuevo con Efectos CSS3

Etiquetas populares