WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Reloj de píxeles
1038
Andev.web
Abrir en el editor
Publica tu código
¿Necesitas un sitio web?
Recomendado
3 July 2025
Ejemplo de código de menú desplegable HTML
3 March 2025
Fondo de cuadrícula de cilindros 3D
26 August 2024
Tienda de accesorios de Star Wars
HTML
Copy
Andev Web
CSS
Copy
html { font-size: 12px; } @media (max-width: 767px) { html { font-size: 2.4vw; } } body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; overflow: hidden; background: #000038; } .clock { position: relative; display: flex; transform: skewX(-16deg); } .row { position: absolute; left: 0.5rem; display: flex; width: 60rem; } .row--top { top: -1.2rem; } .row--bottom { bottom: -1.2rem; } .row .number__tile { background: #12486b; } .column { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 1.2rem; height: 6rem; } .column .number__tile { margin: 0.1rem; background: #12486b; } .column .number__tile--white { background: linear-gradient(#f5fccd, #eb80b1); } .column .number__tile:not(.column .number__tile--white) { transform: translateX(0.5rem); } .number { display: flex; flex-wrap: wrap; width: 2.4rem; height: 6rem; } .number__tile { position: relative; width: 1rem; height: 1rem; margin: 0.1rem; background: linear-gradient(#f5fccd, #eb80b1); border-radius: 10%; transition: transform 0.5s ease; transform-style: preserve-3d; transform-origin: 50% 50% 1rem; } .number__tile:before { content: ""; position: absolute; top: 0; left: 0; width: 1rem; height: 1rem; background: #12486b; border-radius: 10%; transform: rotate3d(0, 1, 0, 90deg); transform-origin: 100% 50%; } .number--1 .number__tile--00, .number--1 .number__tile--20, .number--1 .number__tile--30, .number--1 .number__tile--02, .number--1 .number__tile--12, .number--1 .number__tile--22, .number--1 .number__tile--32 { transform: rotate3d(0, -1, 0, 90deg); } .number--2 .number__tile--10, .number--2 .number__tile--20, .number--2 .number__tile--31 { transform: rotate3d(0, -1, 0, 90deg); } .number--3 .number__tile--10, .number--3 .number__tile--30 { transform: rotate3d(0, -1, 0, 90deg); } .number--4 .number__tile--00, .number--4 .number__tile--11, .number--4 .number__tile--30, .number--4 .number__tile--40 { transform: rotate3d(0, -1, 0, 90deg); } .number--5 .number__tile--11, .number--5 .number__tile--30, .number--5 .number__tile--42 { transform: rotate3d(0, -1, 0, 90deg); } .number--6 .number__tile--00, .number--6 .number__tile--11 { transform: rotate3d(0, -1, 0, 90deg); } .number--7 .number__tile--10, .number--7 .number__tile--20, .number--7 .number__tile--31, .number--7 .number__tile--41 { transform: rotate3d(0, -1, 0, 90deg); } .number--8 .number__tile--20, .number--8 .number__tile--21 { transform: rotate3d(0, -1, 0, 90deg); } .number--9 .number__tile--30, .number--9 .number__tile--41 { transform: rotate3d(0, -1, 0, 90deg); }
JS
Copy
const hour0 = document.querySelector("#hour-0"); const hour1 = document.querySelector("#hour-1"); const minute0 = document.querySelector("#minute-0"); const minute1 = document.querySelector("#minute-1"); const second0 = document.querySelector("#second-0"); const second1 = document.querySelector("#second-1"); function setNumber(element, number) { element.classList = `number number--${number}`; } function setSection(firstElement, secondElement, number) { const stringNumber = String(number); if (stringNumber.length > 1) { setNumber(firstElement, stringNumber[0]); setNumber(secondElement, stringNumber[1]); } else { setNumber(firstElement, 0); setNumber(secondElement, stringNumber[0]); } } function setClock() { const date = new Date(); const hours = date.getHours(); const minutes = date.getMinutes(); const seconds = date.getSeconds(); setSection(hour0, hour1, hours); setSection(minute0, minute1, minutes); setSection(second0, second1, seconds); } setClock(); setInterval(() => { setClock(); }, 500);