Reloj analógico

1,235 alejandrokundrah

Abrir en el editor Publica tu código

Recomendado

22 November 2025

Código HTML del juego de la serpiente

12 April 2025

sistemas de energía solar

30 May 2025

Formulario de registro/inicio de sesión

HTML

<html>

<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Analog Digital Watch</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' href='style.css'>
</head>

const hr = document.querySelector('#hr').style;
            const mn = document.querySelector('#min').style;
            const sc = document.querySelector('#sec').style;

const [hh, mm, ss] = [now.getHours() * 30, now.getMinutes() * 6, now.getSeconds() * 6];

hr.transform = `rotatez(${hh + mm / 12}deg)`;
            mn.transform = `rotateZ(${mm}deg)`;
            sc.transform = `rotateZ(${ss}deg)`;
        };

setInterval(updateClock, 1000);
        updateClock();
    </script>
 
  
</body>

</html>

CSS

* {
    font-family: sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #acbaca;
}

.clock {
    position: relative;
    width: 300px;
    height: 300px;
    background: #c9d5e0;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50px;
    box-shadow: 30px 30px 30px -10px rgba(0, 0, 0, 0.15),
    inset 15px 15px 10px rgba(255, 255, 255, 0.75),
    -15px -15px 35px rgba(255, 255, 255, 0.55),
    inset -1px -1px 10px rgba(0, 0, 0, 0.2);
}

.clock::before{
    content: '';
    position: absolute;
    width: 4px;
    height: 4px;
    background: #e91e63;
    border-radius: 50%;
    z-index: 10000;
    box-shadow: 0 0 0 1px #e91e63,
    0 0 0 3px #fff,
    0 0 5px 5px rgba(0,0,0,0.15);
}

.clock .digits {
    position: absolute;
    inset: 35px;
    background: #152b4a;
    border-radius: 50%;
    box-shadow: 5px 5px 15px #152b4a66,
    inset 5px 5px 15px rgba(255, 255, 255, 0.55),
    -6px -6px 10px rgba(255, 255, 255, 1);
}

.clock .digits span {
    position: absolute;
    inset: 5px;
    text-align: center;
    color: #fff;
    font-size: 1.25rem;
    transform: rotate(calc(90deg * var(--i)));
}

.clock .digits span b {
    font-weight: 600;
    display: inline-block;
    transform: rotate(calc(-90deg * var(--i)));
}

.clock .digits::before {
    content: '';
    position: absolute;
    inset: 35px;
    background: linear-gradient(#2196f3, #e91e63);
    border-radius: 50%;
    animation: animate 2s linear infinite;
}

@keyframes animate {
    0% {
        transform: rotate(360deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

.clock .digits::after {
    content: '';
    position: absolute;
    inset: 38px;
    background: #152b4a;
    border-radius: 50%;
}

.clock .digits .circle {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    z-index: 10;
}

.clock .digits .circle i {
    position: absolute;
    width: 3px;
    height: 50%;
    background: #fff;
    transform-origin: bottom;
    transform: scaleY(0.55);
}

.clock .digits .circle#hr i {
    transform: scaleY(0.3);
    width: 4px;
}

.clock .digits .circle#min i {
    transform: scaleY(0.45);
    background: #2196f3;
}

.clock .digits .circle#sec i {
    transform: scaleY(0.55);
    width: 2px;
    background: #e91e63;
    box-shadow: 0 0 30px #e91e63;
}