HTML
CSS
JS
Edit on Codewith.it
<div class="orologio"> <div class="ora"> <div class="o" id="o"></div> </div> <div class="min"> <div class="m" id="m"></div> </div> <div class="sec"> <div class="s" id="s"></div> </div> </div>
.orologio{ width:350px; height:350px; display:flex; justify-content:center; align-items:center; background:url( https://www.byte-post.com/wp-content/uploads/2020/03/clock-number-only.png ); background-size:cover; border:10px solid #000000; border-radius:50%; box-shadow: 0 15px 15px rgba(0,0,0,0.3); } .orologio:before{ content:''; position:absolute; width:15px; height:15px; background:#000; border-radius:50%; z-index:100; } .orologio .ora, .orologio .min, .orologio .sec { position:absolute; } .o { width:160px; height:160px; } .m { width:190px; height:190px; } .s { width:230px; height:230px; } .o, .m, .s { display:flex; justify-content:center; border-radius:50%; } .o:before { content:''; position:absolute; width: 8px; height:80px; background:red; border:1px solid rgb(166,0,0); z-index:8; } .m:before { content:''; position:absolute; width: 5px; height:90px; background:red; border:1px solid rgb(166,0,0); z-index:9; } .s:before { content:''; position:absolute; width: 2px; height:150px; border:1px solid rgb(166,0,0); background:red; z-index:10; } .o:before, .m:before, .s:before{ box-shadow: 3px 3px 4px rgba(0,0,0,0.24); }
function time(){ const deg = 6; const o = document.querySelector('#o'); const m = document.querySelector('#m'); const s = document.querySelector('#s'); var gg = new Date(); var oo = gg.getHours() * 30; var mm = gg.getMinutes() * deg; var ss = gg.getSeconds() * deg; o.style.transform = `rotateZ(${(oo)+(mm/12)}deg)`; m.style.transform = `rotateZ(${mm}deg)`; s.style.transform = `rotateZ(${ss}deg)`; } setInterval(time, 1000);