◆ WPF 版を CSS に置き換えた
◆ 細かなデザインはなし
◆ 初期値と非表示から表示に切り替えた時に JavaScript で時刻調整する

これが出てきたフォルダにあった最後のもの
さっきの WPF のアナログ時計あれを HTML/CSS/JavaScript にしたものです

<!doctype html>
<meta charset="utf-8"/>

<style>
#frame{
width:100px;
height:100px;
background:#ddd;
margin:10px;
border-radius:50%;
position:relative;
}
#h{
position: absolute;
border-right:5px solid white;
width:47.5px;
height:25px;
margin-top: 25px;
animation: rotate 43200s linear 0s infinite;
transform-origin: 50px 25px;
}
#m{
position: absolute;
border-right:3px solid white;
width:48.5px;
height:40px;
margin-top:10px;
animation: rotate 3600s linear 0s infinite;
transform-origin: 50px 40px;
}
#s{
position: absolute;
border-right:1px solid white;
width:49.5px;
height:55px;
margin-top: 7px;
animation: rotate 60s linear 0s infinite;
transform-origin: 50px 43px;
}
#center-point{
position: absolute;
top:48px;
left:48px;
width:5px;
height:5px;
border-radius: 50%;
background: #aaa;
}
@keyframes rotate {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
</style>

<div id="frame">
<div id="h"></div>
<div id="m"></div>
<div id="s"></div>
<div id="center-point"></div>
</div>

<script>
async function adjust(){
const obj = await fetch("https://ntp-a1.nict.go.jp/cgi-bin/json").then(e => e.json())
const datetime = new Date(obj.st * 1000)
const date = new Date(datetime.getFullYear(), datetime.getMonth(), datetime.getDate())
const sec = (datetime - date) / 1000

document.querySelector("#h").style.animationDelay
= document.querySelector("#m").style.animationDelay
= document.querySelector("#s").style.animationDelay = `-${sec}s`
}

document.addEventListener("visibilitychange", function(eve){
document.visibilityState === "visible" && adjust()
})

adjust()
</script>

分の刻みがないなど見た目はシンプルにしてます
あと デスクトップアプリだとネットにつながってないことも考慮してローカル時刻を使うこともありましたが ウェブページだと見えてるならネットにはつながってるだろうということでローカル時刻は使いません
あくまで針の動かし方を同じ考え方で実装したもの (だったはず) です

こういうのです

aclkjs

デモ


ちなみに WPF 版は

aclk-m