Clock(CSS+Script)

 

 

 

출처 : Youtube > Online Tutorials 채널

* { margin: 0; padding: 0; box-sizing: border-box; } .clock-display { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #091921; } .clock { width: 350px; height: 350px; display: flex; justify-content: center; align-items: center; background: url('https://k.kakaocdn.net/dn/bmbaGK/btqCGRfo808/dAlVtVwx5KjNGJBuHktRX0/img.png'); background-size: cover; border: 4px solid #091921; border-radius: 50%; box-shadow: 0 -15px 15px rgba(255, 255, 255, 0.05), inset 0 -15px 15px rgba(255, 255, 255, 0.05), 0 15px 15px rgba(0, 0, 0, 0.05), inset 0 -15px 15px rgba(0, 0, 0, 0.05); } .clock:before{ content: ''; position: absolute; width: 15px; height: 15px; background: #fff; border-radius: 50%; z-index: 10000; } .clock .hour, .clock .min, .clock .sec { position: absolute } .clock .hour, .hr{ width: 160px; height: 160px; } .clock .min, .mn{ width: 190px; height: 190px; } .clock .sec, .sc{ width: 230px; height: 230px; } .hr, .mn, .sc{ display: flex; justify-content: center; /* align-items: center; */ position: absolute; border-radius: 50%; } .hr:before{ content: ''; position: absolute; width: 8px; height: 80px; background: #ff105e; z-index: 10; border-radius: 6px 6px 0 0; } .mn:before{ content: ''; position: absolute; width: 4px; height: 90px; background: #fff; z-index: 11; border-radius: 6px 6px 0 0; } .sc:before{ content: ''; position: absolute; width: 2px; height: 150px; background: #fff; z-index: 12; border-radius: 6px 6px 0 0; }