reloj normal

CODIGO:

    <div id="reloj">00:00:00</div>

    <!-- CSS para el estilo del reloj -->
    <style>
        #reloj {
            font-size: 2em; /* Ajusta el tamaño según lo que necesites */
            background: #333; /* Fondo oscuro para el reloj */
            padding: 10px; /* Espaciado interno */
            border-radius: 10px; /* Bordes redondeados */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Sombra para profundidad */
            color: #fff; /* Color del texto */
            text-align: center; /* Alineación del texto al centro */
            width: fit-content; /* Ajuste automático del ancho */
            margin: 0 auto; /* Centra el reloj en su contenedor */
        }
    </style>
    
    <!-- JavaScript para actualizar el reloj -->
    <script>
        function actualizarReloj() {
            var ahora = new Date();
            var horas = ahora.getHours().toString().padStart(2, '0');
            var minutos = ahora.getMinutes().toString().padStart(2, '0');
            var segundos = ahora.getSeconds().toString().padStart(2, '0');
            document.getElementById('reloj').innerText = `${horas}:${minutos}:${segundos}`;
        }
    
        // Actualizar el reloj cada segundo
        setInterval(actualizarReloj, 1000);
    
        // Actualizar el reloj inmediatamente al cargar la página
        actualizarReloj();
    </script>
    

reloj minimalista

CODIGO:

    <div id="relojMinimalista">00:00:00</div>

<!-- CSS para el estilo del reloj minimalista -->
<style>
#relojMinimalista {
    font-size: 2em;
    color: #000; /* Color del texto negro */
    background: #f7f7f7; /* Fondo claro */
    padding: 10px;
    border-radius: 10px; /* Bordes completamente redondeados */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Sombra suave */
    text-align: center;
    width: fit-content;
    margin: 0 auto; /* Centrado con margen superior */
    font-family: 'Arial', sans-serif; /* Fuente minimalista */
}
</style>

<!-- JavaScript para actualizar el reloj -->
<script>
function actualizarRelojMinimalista() {
    var ahora = new Date();
    var horas = ahora.getHours().toString().padStart(2, '0');
    var minutos = ahora.getMinutes().toString().padStart(2, '0');
    var segundos = ahora.getSeconds().toString().padStart(2, '0');
    document.getElementById('relojMinimalista').innerText = `${horas}:${minutos}:${segundos}`;
}

setInterval(actualizarRelojMinimalista, 1000);
actualizarRelojMinimalista();
</script>

reloj estilo neón

CODIGO:

    <div id="relojNeon">00:00:00</div>

<!-- CSS para el estilo del reloj neón -->
<style>
    #relojNeon {
        font-size: 2em;
        color: #0ff; /* Color de texto cian */
        text-shadow: 0 0 20px #0ff, 0 0 30px #0ff, 0 0 40px #0ff, 0 0 50px #0ff; /* Efecto de brillo neón */
        background: #222; /* Fondo oscuro */
        padding: 10px;
        border-radius: 10px;
        text-align: center;
        width: fit-content;
        margin: 0 auto;
        font-family: 'Courier New', monospace; /* Fuente estilo digital */
    }
</style>

<!-- JavaScript para actualizar el reloj -->
<script>
    function actualizarRelojNeon() {
        var ahora = new Date();
        var horas = ahora.getHours().toString().padStart(2, '0');
        var minutos = ahora.getMinutes().toString().padStart(2, '0');
        var segundos = ahora.getSeconds().toString().padStart(2, '0');
        document.getElementById('relojNeon').innerText = `${horas}:${minutos}:${segundos}`;
    }

    setInterval(actualizarRelojNeon, 1000);
    actualizarRelojNeon();
</script>

reloj estilo retro

CODIGO:

    <div id="relojRetro">00:00:00</div>

<!-- CSS para el estilo del reloj retro -->
<style>
    #relojRetro {
        font-size: 2em;
        color: #ffcc00; /* Color amarillo retro */
        background: #333; /* Fondo oscuro */
        padding: 10px;
        border: 10px solid #ffcc00; /* Borde amarillo retro */
        border-radius: 10px;
        text-align: center;
        width: fit-content;
        margin: 0 auto;
        font-family: 'Consolas', monospace; /* Fuente retro */
    }
</style>

<!-- JavaScript para actualizar el reloj -->
<script>
    function actualizarRelojRetro() {
        var ahora = new Date();
        var horas = ahora.getHours().toString().padStart(2, '0');
        var minutos = ahora.getMinutes().toString().padStart(2, '0');
        var segundos = ahora.getSeconds().toString().padStart(2, '0');
        document.getElementById('relojRetro').innerText = `${horas}:${minutos}:${segundos}`;
    }

    setInterval(actualizarRelojRetro, 1000);
    actualizarRelojRetro();
</script>

reloj estilo gradient

CODIGO:

    <div id="relojGradient">00:00:00</div>

<!-- CSS para el estilo del reloj gradient -->
<style>
    #relojGradient {
        font-size: 2em;
        color: #fff; /* Color del texto blanco */
        background: linear-gradient(135deg, #ff7e5f, #feb47b); /* Degradado de color */
        padding: 10px;
        border-radius: 10px; /* Bordes redondeados */
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Sombra */
        text-align: center;
        width: fit-content;
        margin: 0px auto;
        font-family: 'Verdana', sans-serif; /* Fuente limpia y moderna */
    }
</style>

<!-- JavaScript para actualizar el reloj -->
<script>
    function actualizarRelojGradient() {
        var ahora = new Date();
        var horas = ahora.getHours().toString().padStart(2, '0');
        var minutos = ahora.getMinutes().toString().padStart(2, '0');
        var segundos = ahora.getSeconds().toString().padStart(2, '0');
        document.getElementById('relojGradient').innerText = `${horas}:${minutos}:${segundos}`;
    }

    setInterval(actualizarRelojGradient, 1000);
    actualizarRelojGradient();
</script>

reloj estilo espejo

CODIGO:

    <div id="relojEspejo">00:00:00</div>

<!-- CSS para el estilo del reloj espejo -->
<style>
    #relojEspejo {
        font-size: 2em;
        color: #e0e0e0; /* Color gris claro */
        background: #1c1c1c; /* Fondo gris oscuro */
        padding: 10px;
        border-radius: 10px;
        text-align: center;
        width: fit-content;
        margin: 0px auto;
        font-family: 'Tahoma', sans-serif; /* Fuente moderna */
        box-shadow: 0 0 15px rgba(255, 255, 255, 0.2), inset 0 0 10px rgba(0, 0, 0, 0.5); /* Efecto de reflejo y sombra interna */
    }
</style>

<!-- JavaScript para actualizar el reloj -->
<script>
    function actualizarRelojEspejo() {
        var ahora = new Date();
        var horas = ahora.getHours().toString().padStart(2, '0');
        var minutos = ahora.getMinutes().toString().padStart(2, '0');
        var segundos = ahora.getSeconds().toString().padStart(2, '0');
        document.getElementById('relojEspejo').innerText = `${horas}:${minutos}:${segundos}`;
    }

    setInterval(actualizarRelojEspejo, 1000);
    actualizarRelojEspejo();
</script>

reloj estilo pastel

CODIGO:

    <div id="relojPastel">00:00:00</div>

<!-- CSS para el estilo del reloj pastel -->
<style>
    #relojPastel {
        font-size: 2em;
        color: #333; /* Color del texto oscuro */
        background: #ffe6e6; /* Fondo color pastel */
        padding: 10px;
        border: 2px solid #ffcccb; /* Borde delgado de color pastel */
        border-radius: 10px;
        text-align: center;
        width: fit-content;
        margin: 0px auto;
        font-family: 'Georgia', serif; /* Fuente elegante */
    }
</style>

<!-- JavaScript para actualizar el reloj -->
<script>
    function actualizarRelojPastel() {
        var ahora = new Date();
        var horas = ahora.getHours().toString().padStart(2, '0');
        var minutos = ahora.getMinutes().toString().padStart(2, '0');
        var segundos = ahora.getSeconds().toString().padStart(2, '0');
        document.getElementById('relojPastel').innerText = `${horas}:${minutos}:${segundos}`;
    }

    setInterval(actualizarRelojPastel, 1000);
    actualizarRelojPastel();
</script>

reloj estilo dark mode

CODIGO:

    <div id="relojDarkMode">00:00:00</div>

<!-- CSS para el estilo del reloj dark mode -->
<style>
    #relojDarkMode {
        font-size: 2em;
        color: #fff; /* Color blanco para el texto */
        background: #181818; /* Fondo gris oscuro */
        padding: 10px;
        border-radius: 10px;
        text-align: center;
        width: fit-content;
        margin: 0px auto;
        font-family: 'Segoe UI', sans-serif; /* Fuente moderna */
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); /* Sombra pronunciada */
    }
</style>

<!-- JavaScript para actualizar el reloj -->
<script>
    function actualizarRelojDarkMode() {
        var ahora = new Date();
        var horas = ahora.getHours().toString().padStart(2, '0');
        var minutos = ahora.getMinutes().toString().padStart(2, '0');
        var segundos = ahora.getSeconds().toString().padStart(2, '0');
        document.getElementById('relojDarkMode').innerText = `${horas}:${minutos}:${segundos}`;
    }

    setInterval(actualizarRelojDarkMode, 1000);
    actualizarRelojDarkMode();
</script>

reloj estilo luxo

CODIGO:

    <div id="relojLuxo">00:00:00</div>

<!-- CSS para el estilo del reloj luxo -->
<style>
    #relojLuxo {
        font-size: 2em;
        color: #f5f5f5; /* Color del texto gris claro */
        background: linear-gradient(145deg, #2c2c2c, #3a3a3a); /* Fondo con efecto de profundidad */
        padding: 10px;
        border-radius: 10px;
        box-shadow: 8px 8px 16px #1a1a1a, -8px -8px 16px #4a4a4a; /* Sombra para efecto de lujo */
        text-align: center;
        width: fit-content;
        margin: 0px auto;
        font-family: 'Lato', sans-serif; /* Fuente moderna y estilizada */
    }
</style>

<!-- JavaScript para actualizar el reloj -->
<script>
    function actualizarRelojLuxo() {
        var ahora = new Date();
        var horas = ahora.getHours().toString().padStart(2, '0');
        var minutos = ahora.getMinutes().toString().padStart(2, '0');
        var segundos = ahora.getSeconds().toString().padStart(2, '0');
        document.getElementById('relojLuxo').innerText = `${horas}:${minutos}:${segundos}`;
    }

    setInterval(actualizarRelojLuxo, 1000);
    actualizarRelojLuxo();
</script>

reloj estilo esqueleto

CODIGO:

    <div id="relojEsqueleto">00:00:00</div>

<!-- CSS para el estilo del reloj esqueleto -->
<style>
    #relojEsqueleto {
        font-size: 2.5em;
        color: #00ccff; /* Color del texto azul claro */
        background: transparent; /* Fondo transparente */
        padding: 10px;
        border: 2px solid #00ccff; /* Borde azul claro */
        border-radius: 10px;
        text-align: center;
        width: fit-content;
        margin: 20px auto;
        font-family: 'Courier New', monospace; /* Fuente estilo retro */
        box-shadow: 0 0 20px #00ccff, inset 0 0 20px #00ccff; /* Sombra interna y externa para efecto de brillo */
    }
</style>

<!-- JavaScript para actualizar el reloj -->
<script>
    function actualizarRelojEsqueleto() {
        var ahora = new Date();
        var horas = ahora.getHours().toString().padStart(2, '0');
        var minutos = ahora.getMinutes().toString().padStart(2, '0');
        var segundos = ahora.getSeconds().toString().padStart(2, '0');
        document.getElementById('relojEsqueleto').innerText = `${horas}:${minutos}:${segundos}`;
    }

    setInterval(actualizarRelojEsqueleto, 1000);
    actualizarRelojEsqueleto();
</script>

reloj estilo glitch

CODIGO:

    <div id="relojGlitch">00:00:00</div>

<!-- CSS para el estilo del reloj glitch -->
<style>
    #relojGlitch {
        font-size: 2em;
        color: #fff;
        background: #000;
        padding: 10px;
        border-radius: 10px;
        text-align: center;
        width: fit-content;
        margin: 0px auto;
        font-family: 'Orbitron', sans-serif; /* Fuente futurista */
        position: relative;
        overflow: hidden;
    }

    #relojGlitch::before, #relojGlitch::after {
        content: attr(id);
        position: absolute;
        left: 0;
        width: 100%;
        overflow: hidden;
        background: inherit;
    }

    #relojGlitch::before {
        top: -2px;
        left: 2px;
        text-shadow: -2px 0 cyan;
        clip: rect(24px, 550px, 90px, 0);
        animation: glitch 2.5s infinite linear alternate-reverse;
    }

    #relojGlitch::after {
        top: 2px;
        left: -2px;
        text-shadow: -2px 0 red;
        clip: rect(85px, 550px, 140px, 0);
        animation: glitch 3s infinite linear alternate-reverse;
    }

    @keyframes glitch {
        0% { clip: rect(42px, 9999px, 44px, 0); transform: skew(0.3deg); }
        5% { clip: rect(80px, 9999px, 82px, 0); transform: skew(0.5deg); }
        10% { clip: rect(30px, 9999px, 32px, 0); transform: skew(0.3deg); }
        15% { clip: rect(26px, 9999px, 28px, 0); transform: skew(0.1deg); }
        20% { clip: rect(53px, 9999px, 55px, 0); transform: skew(0.2deg); }
        25% { clip: rect(50px, 9999px, 52px, 0); transform: skew(0.3deg); }
        30% { clip: rect(63px, 9999px, 65px, 0); transform: skew(0.4deg); }
        35% { clip: rect(100px, 9999px, 102px, 0); transform: skew(0.3deg); }
        40% { clip: rect(95px, 9999px, 97px, 0); transform: skew(0.4deg); }
        45% { clip: rect(37px, 9999px, 39px, 0); transform: skew(0.3deg); }
        50% { clip: rect(17px, 9999px, 19px, 0); transform: skew(0.5deg); }
        55% { clip: rect(61px, 9999px, 63px, 0); transform: skew(0.4deg); }
        60% { clip: rect(10px, 9999px, 12px, 0); transform: skew(0.1deg); }
        65% { clip: rect(67px, 9999px, 69px, 0); transform: skew(0.2deg); }
        70% { clip: rect(41px, 9999px, 43px, 0); transform: skew(0.3deg); }
        75% { clip: rect(70px, 9999px, 72px, 0); transform: skew(0.2deg); }
        80% { clip: rect(58px, 9999px, 60px, 0); transform: skew(0.1deg); }
        85% { clip: rect(48px, 9999px, 50px, 0); transform: skew(0.2deg); }
        90% { clip: rect(37px, 9999px, 39px, 0); transform: skew(0.3deg); }
        95% { clip: rect(80px, 9999px, 82px, 0); transform: skew(0.4deg); }
        100% { clip: rect(60px, 9999px, 62px, 0); transform: skew(0.5deg); }
    }
</style>

<!-- JavaScript para actualizar el reloj -->
<script>
    function actualizarRelojGlitch() {
        var ahora = new Date();
        var horas = ahora.getHours().toString().padStart(2, '0');
        var minutos = ahora.getMinutes().toString().padStart(2, '0');
        var segundos = ahora.getSeconds().toString().padStart(2, '0');
        document.getElementById('relojGlitch').innerText = `${horas}:${minutos}:${segundos}`;
    }

    setInterval(actualizarRelojGlitch, 1000);
    actualizarRelojGlitch();
</script>

reloj estilo holográfico

CODIGO:

    <div id="relojHolografico">00:00:00</div>

<!-- CSS para el estilo del reloj holográfico -->
<style>
    #relojHolografico {
        font-size: 2em;
        color: #fff;
        background: linear-gradient(45deg, #00c6ff, #0072ff);
        padding: 10px;
        border-radius: 10px;
        text-align: center;
        width: fit-content;
        margin: 0px auto;
        font-family: 'Orbitron', sans-serif; /* Fuente futurista */
        box-shadow: 0 0 20px rgba(0, 198, 255, 0.6), 0 0 40px rgba(0, 198, 255, 0.4); /* Sombra de neón holográfica */
        background-clip: text;
        color: transparent;
        -webkit-background-clip: text;
    }
</style>

<!-- JavaScript para actualizar el reloj -->
<script>
    function actualizarRelojHolografico() {
        var ahora = new Date();
        var horas = ahora.getHours().toString().padStart(2, '0');
        var minutos = ahora.getMinutes().toString().padStart(2, '0');
        var segundos = ahora.getSeconds().toString().padStart(2, '0');
        document.getElementById('relojHolografico').innerText = `${horas}:${minutos}:${segundos}`;
    }

    setInterval(actualizarRelojHolografico, 1000);
    actualizarRelojHolografico();
</script>

reloj estilo vanguardia

CODIGO:

    <div id="relojVanguardia">00:00:00</div>

<!-- CSS para el estilo del reloj vanguardia -->
<style>
    #relojVanguardia {
        font-size: 2em;
        color: #ffffff;
        background: #1f1f1f;
        padding: 10px;
        border-radius: 10px;
        text-align: center;
        width: fit-content;
        margin: 0px auto;
        font-family: 'Bebas Neue', sans-serif; /* Fuente moderna */
        letter-spacing: 0.1em;
        text-transform: uppercase;
        border: 2px solid #ecf0f1; /* Borde delgado gris claro */
        box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.2), 0 0 20px rgba(0, 0, 0, 0.5); /* Sombra y profundidad */
    }
</style>

<!-- JavaScript para actualizar el reloj -->
<script>
    function actualizarRelojVanguardia() {
        var ahora = new Date();
        var horas = ahora.getHours().toString().padStart(2, '0');
        var minutos = ahora.getMinutes().toString().padStart(2, '0');
        var segundos = ahora.getSeconds().toString().padStart(2, '0');
        document.getElementById('relojVanguardia').innerText = `${horas}:${minutos}:${segundos}`;
    }

    setInterval(actualizarRelojVanguardia, 1000);
    actualizarRelojVanguardia();
</script>

reloj estilo digital retro

CODIGO:

    <div id="relojRetroDigital">00:00:00</div>

<!-- CSS para el estilo del reloj digital retro -->
<style>
    #relojRetroDigital {
        font-size: 2em;
        color: #33ff00; /* Verde típico de pantallas retro */
        background: #000; /* Fondo negro */
        padding: 10px;
        border-radius: 10px;
        text-align: center;
        width: fit-content;
        margin: 0px auto;
        font-family: 'Courier New', Courier, monospace; /* Fuente estilo digital */
        border: 2px solid #33ff00; /* Borde verde */
        box-shadow: 0 0 15px #33ff00; /* Sombra verde brillante */
    }
</style>

<!-- JavaScript para actualizar el reloj -->
<script>
    function actualizarRelojRetroDigital() {
        var ahora = new Date();
        var horas = ahora.getHours().toString().padStart(2, '0');
        var minutos = ahora.getMinutes().toString().padStart(2, '0');
        var segundos = ahora.getSeconds().toString().padStart(2, '0');
        document.getElementById('relojRetroDigital').innerText = `${horas}:${minutos}:${segundos}`;
    }

    setInterval(actualizarRelojRetroDigital, 1000);
    actualizarRelojRetroDigital();
</script>

reloj estilo gótico

CODIGO:

    <div id="relojGotico">00:00:00</div>

<!-- CSS para el estilo del reloj gótico -->
<style>
    #relojGotico {
        font-size: 2em;
        color: #ff4444; /* Rojo oscuro */
        background: #000; /* Fondo negro */
        padding: 10px;
        border-radius: 10px;
        text-align: center;
        width: fit-content;
        margin: 0px auto;
        font-family: 'UnifrakturCook', cursive; /* Fuente gótica */
        text-shadow: 0 0 10px rgba(255, 68, 68, 0.8), 0 0 20px rgba(255, 68, 68, 0.6); /* Sombra roja brillante */
        border: 2px solid #ff4444; /* Borde rojo oscuro */
    }
</style>

<!-- JavaScript para actualizar el reloj -->
<script>
    function actualizarRelojGotico() {
        var ahora = new Date();
        var horas = ahora.getHours().toString().padStart(2, '0');
        var minutos = ahora.getMinutes().toString().padStart(2, '0');
        var segundos = ahora.getSeconds().toString().padStart(2, '0');
        document.getElementById('relojGotico').innerText = `${horas}:${minutos}:${segundos}`;
    }

    setInterval(actualizarRelojGotico, 1000);
    actualizarRelojGotico();
</script>

reloj estilo código binario

CODIGO:

    <div id="relojBinario">0000 : 0000 : 0000</div>

<!-- CSS para el estilo del reloj código binario -->
<style>
    #relojBinario {
        font-size: 2em;
        color: #00ff00; /* Verde de pantalla de terminal */
        background: #000; /* Fondo negro */
        padding: 10px;
        border-radius: 10px;
        text-align: center;
        width: fit-content;
        margin: 0px auto;
        font-family: 'Courier New', Courier, monospace; /* Fuente estilo terminal */
        border: 2px solid #00ff00; /* Borde verde */
        box-shadow: 0 0 10px #00ff00; /* Sombra verde */
    }
</style>

<!-- JavaScript para actualizar el reloj -->
<script>
    function actualizarRelojBinario() {
        var ahora = new Date();
        var horas = ahora.getHours().toString(2).padStart(4, '0'); // Conversión a binario
        var minutos = ahora.getMinutes().toString(2).padStart(4, '0'); // Conversión a binario
        var segundos = ahora.getSeconds().toString(2).padStart(4, '0'); // Conversión a binario
        document.getElementById('relojBinario').innerText = `${horas} : ${minutos} : ${segundos}`;
    }

    setInterval(actualizarRelojBinario, 1000);
    actualizarRelojBinario();
</script>

reloj estilo madera tallada

CODIGO:

    <div id="relojMadera">00:00:00</div>

<!-- CSS para el estilo del reloj madera tallada -->
<style>
    #relojMadera {
        font-size: 2em;
        color: #8b4513; /* Color marrón para simular madera */
        background: linear-gradient(135deg, #f0e68c, #8b4513); /* Fondo con efecto madera */
        padding: 10px;
        border-radius: 10px;
        text-align: center;
        width: fit-content;
        margin: 0px auto;
        font-family: 'Times New Roman', serif; /* Fuente clásica */
        box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5), 0 0 10px rgba(0, 0, 0, 0.8); /* Sombra interior para efecto de tallado */
        text-shadow: 0 1px 0 #ffffff; /* Efecto de relieve */
    }
</style>

<!-- JavaScript para actualizar el reloj -->
<script>
    function actualizarRelojMadera() {
        var ahora = new Date();
        var horas = ahora.getHours().toString().padStart(2, '0');
        var minutos = ahora.getMinutes().toString().padStart(2, '0');
        var segundos = ahora.getSeconds().toString().padStart(2, '0');
        document.getElementById('relojMadera').innerText = `${horas}:${minutos}:${segundos}`;
    }

    setInterval(actualizarRelojMadera, 1000);
    actualizarRelojMadera();
</script>

reloj estilo aurora boreal

CODIGO:

    <div id="relojAurora">00:00:00</div>

<!-- CSS para el estilo del reloj aurora boreal -->
<style>
    #relojAurora {
        font-size: 2em;
        color: #fff;
        background: linear-gradient(120deg, #1e3c72, #2a5298, #76b852, #8dc26f);
        padding: 10px;
        border-radius: 10px;
        text-align: center;
        width: fit-content;
        margin: 0px auto;
        font-family: 'Orbitron', sans-serif; /* Fuente futurista */
        background-size: 400% 400%; /* Tamaño para la animación */
        animation: aurora 15s ease infinite; /* Animación para el fondo */
        box-shadow: 0 0 30px rgba(0, 255, 255, 0.5); /* Sombra de neón */
    }

    @keyframes aurora {
        0% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
        100% { background-position: 0% 50%; }
    }
</style>

<!-- JavaScript para actualizar el reloj -->
<script>
    function actualizarRelojAurora() {
        var ahora = new Date();
        var horas = ahora.getHours().toString().padStart(2, '0');
        var minutos = ahora.getMinutes().toString().padStart(2, '0');
        var segundos = ahora.getSeconds().toString().padStart(2, '0');
        document.getElementById('relojAurora').innerText = `${horas}:${minutos}:${segundos}`;
    }

    setInterval(actualizarRelojAurora, 1000);
    actualizarRelojAurora();
</script>

reloj estilo vaporwave

CODIGO:

    <div id="relojVaporwave">00:00:00</div>

<!-- CSS para el estilo del reloj vaporwave -->
<style>
    #relojVaporwave {
        font-size: 2em;
        color: #ff77aa; /* Rosa típico del estilo vaporwave */
        background: #1e1e2f;
        padding: 10px;
        border-radius: 10px;
        text-align: center;
        width: fit-content;
        margin: 0px auto;
        font-family: 'Press Start 2P', cursive; /* Fuente pixelada */
        text-shadow: 0 0 10px #ff77aa, 0 0 20px #ff77aa, 0 0 30px #ff77aa; /* Sombra luminosa */
        border: 2px solid #ff77aa; /* Borde rosa */
        animation: vaporwavePulse 2s infinite alternate; /* Animación de pulso */
    }

    @keyframes vaporwavePulse {
        from { transform: scale(1); }
        to { transform: scale(1.05); }
    }
</style>

<!-- JavaScript para actualizar el reloj -->
<script>
    function actualizarRelojVaporwave() {
        var ahora = new Date();
        var horas = ahora.getHours().toString().padStart(2, '0');
        var minutos = ahora.getMinutes().toString().padStart(2, '0');
        var segundos = ahora.getSeconds().toString().padStart(2, '0');
        document.getElementById('relojVaporwave').innerText = `${horas}:${minutos}:${segundos}`;
    }

    setInterval(actualizarRelojVaporwave, 1000);
    actualizarRelojVaporwave();
</script>

reloj estilo niebla flotante

CODIGO:

    <div id="relojNiebla">00:00:00</div>

<!-- CSS para el estilo del reloj niebla flotante -->
<style>
    #relojNiebla {
        font-size: 2em;
        color: #ffffff;
        background: rgba(0, 0, 0, 0.5);
        padding: 10px;
        border-radius: 10px;
        text-align: center;
        width: fit-content;
        margin: 0px auto;
        font-family: 'Arial', sans-serif;
        box-shadow: 0 0 30px rgba(255, 255, 255, 0.5); /* Sombra de niebla */
        background-image: url('https://www.transparenttextures.com/patterns/fog.png'); /* Fondo de niebla */
        background-size: cover; /* Cubrir todo el fondo */
        animation: flotante 5s ease-in-out infinite; /* Efecto de flotación */
    }

    @keyframes flotante {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-10px); }
    }
</style>

<!-- JavaScript para actualizar el reloj -->
<script>
    function actualizarRelojNiebla() {
        var ahora = new Date();
        var horas = ahora.getHours().toString().padStart(2, '0');
        var minutos = ahora.getMinutes().toString().padStart(2, '0');
        var segundos = ahora.getSeconds().toString().padStart(2, '0');
        document.getElementById('relojNiebla').innerText = `${horas}:${minutos}:${segundos}`;
    }

    setInterval(actualizarRelojNiebla, 1000);
    actualizarRelojNiebla();
</script>

reloj estilo pizarra

CODIGO:

    <div id="relojPizarra">00:00:00</div>

<!-- CSS para el estilo del reloj pizarra -->
<style>
    #relojPizarra {
        font-size: 2em;
        color: #fff;
        background: #2c2c2c; /* Fondo gris oscuro */
        padding: 10px;
        border-radius: 10px;
        text-align: center;
        width: fit-content;
        margin: 0px auto;
        font-family: 'Chalkduster', cursive; /* Fuente estilo pizarra */
        text-shadow: 0 0 5px #000; /* Sombra para dar efecto de tiza */
        border: 2px solid #fff; /* Borde blanco */
        box-shadow: 0 0 20px rgba(255, 255, 255, 0.3); /* Sombra de luz suave */
    }
</style>

<!-- JavaScript para actualizar el reloj -->
<script>
    function actualizarRelojPizarra() {
        var ahora = new Date();
        var horas = ahora.getHours().toString().padStart(2, '0');
        var minutos = ahora.getMinutes().toString().padStart(2, '0');
        var segundos = ahora.getSeconds().toString().padStart(2, '0');
        document.getElementById('relojPizarra').innerText = `${horas}:${minutos}:${segundos}`;
    }

    setInterval(actualizarRelojPizarra, 1000);
    actualizarRelojPizarra();
</script>

reloj estilo vapor líquido

CODIGO:

    <div id="relojLiquido">00:00:00</div>

<!-- CSS para el estilo del reloj vapor líquido -->
<style>
    #relojLiquido {
        font-size: 2em;
        color: #ffffff;
        background: linear-gradient(to bottom, #4e9af1, #3160c6);
        padding: 10px;
        border-radius: 10px;
        text-align: center;
        width: fit-content;
        margin: 0px auto;
        font-family: 'Helvetica', sans-serif;
        background-size: 100% 200%;
        background-position: top;
        animation: liquido 3s infinite alternate; /* Animación de flujo */
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2), inset 0 0 20px rgba(255, 255, 255, 0.3); /* Sombra interior y exterior */
    }

    @keyframes liquido {
        0% { background-position: top; }
        100% { background-position: bottom; }
    }
</style>

<!-- JavaScript para actualizar el reloj -->
<script>
    function actualizarRelojLiquido() {
        var ahora = new Date();
        var horas = ahora.getHours().toString().padStart(2, '0');
        var minutos = ahora.getMinutes().toString().padStart(2, '0');
        var segundos = ahora.getSeconds().toString().padStart(2, '0');
        document.getElementById('relojLiquido').innerText = `${horas}:${minutos}:${segundos}`;
    }

    setInterval(actualizarRelojLiquido, 1000);
    actualizarRelojLiquido();
</script>

reloj estilo pantalla de carga

CODIGO:

    <div id="relojCarga">00:00:00</div>

<!-- CSS para el estilo del reloj pantalla de carga -->
<style>
    #relojCarga {
        font-size: 2em;
        color: #00ffcc;
        background: #000;
        padding: 10px;
        border-radius: 10%;
        text-align: center;
        width: fit-content;
        margin: 0px auto;
        font-family: 'OCR A Std', monospace; /* Fuente de estilo técnico */
        text-shadow: 0 0 10px #00ffcc;
        border: 3px solid #00ffcc;
        box-shadow: 0 0 30px #00ffcc;
        animation: cargar 1s infinite alternate ease-in-out; /* Efecto de carga */
    }

    @keyframes cargar {
        from { transform: scale(1); }
        to { transform: scale(1.1); }
    }
</style>

<!-- JavaScript para actualizar el reloj -->
<script>
    function actualizarRelojCarga() {
        var ahora = new Date();
        var horas = ahora.getHours().toString().padStart(2, '0');
        var minutos = ahora.getMinutes().toString().padStart(2, '0');
        var segundos = ahora.getSeconds().toString().padStart(2, '0');
        document.getElementById('relojCarga').innerText = `${horas}:${minutos}:${segundos}`;
    }

    setInterval(actualizarRelojCarga, 1000);
    actualizarRelojCarga();
</script>

reloj estilo cinta LED

CODIGO:

    <div id="relojLED">00:00:00</div>

<!-- CSS para el estilo del reloj cinta LED -->
<style>
    #relojLED {
        font-size: 2em;
        color: #00ff00;
        background: #000;
        padding: 10px;
        border-radius: 10px;
        text-align: center;
        width: fit-content;
        margin: 0px auto;
        font-family: 'Digital-7', sans-serif; /* Fuente de estilo LED */
        border: 2px solid #00ff00;
        box-shadow: 0 0 10px #00ff00; /* Efecto de neón */
        text-shadow: 0 0 10px #00ff00; /* Brillo del texto */
    }
</style>

<!-- JavaScript para actualizar el reloj -->
<script>
    function actualizarRelojLED() {
        var ahora = new Date();
        var horas = ahora.getHours().toString().padStart(2, '0');
        var minutos = ahora.getMinutes().toString().padStart(2, '0');
        var segundos = ahora.getSeconds().toString().padStart(2, '0');
        document.getElementById('relojLED').innerText = `${horas}:${minutos}:${segundos}`;
    }

    setInterval(actualizarRelojLED, 1000);
    actualizarRelojLED();
</script>

reloj estilo hielo fracturado

CODIGO:

    <div id="relojHielo">00:00:00</div>

<!-- CSS para el estilo del reloj hielo fracturado -->
<style>
    #relojHielo {
        font-size: 2em;
        color: #e0f7fa;
        background: linear-gradient(135deg, #00bcd4, #0288d1);
        padding: 10px;
        border-radius: 10px;
        text-align: center;
        width: fit-content;
        margin: 0px auto;
        font-family: 'Arial', sans-serif;
        border: 2px solid #00acc1;
        box-shadow: 0 0 20px rgba(0, 188, 212, 0.5); /* Efecto de hielo */
        background-clip: padding-box;
        position: relative;
    }

    #relojHielo::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url('https://www.transparenttextures.com/patterns/ice.png') no-repeat center;
        opacity: 0.4;
        border-radius: 10px;
    }
</style>

<!-- JavaScript para actualizar el reloj -->
<script>
    function actualizarRelojHielo() {
        var ahora = new Date();
        var horas = ahora.getHours().toString().padStart(2, '0');
        var minutos = ahora.getMinutes().toString().padStart(2, '0');
        var segundos = ahora.getSeconds().toString().padStart(2, '0');
        document.getElementById('relojHielo').innerText = `${horas}:${minutos}:${segundos}`;
    }

    setInterval(actualizarRelojHielo, 1000);
    actualizarRelojHielo();
</script>

reloj estilo circuito impreso

CODIGO:

    <div id="relojCircuito">00:00:00</div>

<!-- CSS para el estilo del reloj circuito impreso -->
<style>
    #relojCircuito {
        font-size: 2em;
        color: #00ffcc;
        background: #000;
        padding: 10px;
        border-radius: 10px;
        text-align: center;
        width: fit-content;
        margin: 0px auto;
        font-family: 'Courier New', monospace;
        border: 2px solid #00ffcc;
        box-shadow: 0 0 20px rgba(0, 255, 255, 0.7); /* Efecto de neón */
        background-image: url('https://www.transparenttextures.com/patterns/circuit.png'); /* Fondo de circuito */
        background-size: cover;
    }
</style>

<!-- JavaScript para actualizar el reloj -->
<script>
    function actualizarRelojCircuito() {
        var ahora = new Date();
        var horas = ahora.getHours().toString().padStart(2, '0');
        var minutos = ahora.getMinutes().toString().padStart(2, '0');
        var segundos = ahora.getSeconds().toString().padStart(2, '0');
        document.getElementById('relojCircuito').innerText = `${horas}:${minutos}:${segundos}`;
    }

    setInterval(actualizarRelojCircuito, 1000);
    actualizarRelojCircuito();
</script>