비전공자 개발일기

Animated Working Analog Clock 본문

HTML _CSS

Animated Working Analog Clock

HiroDaegu 2023. 1. 20. 00:09
728x90
SMALL

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ANIMATED WORKING ANALOG CLOCK</title>
    <link rel="stylesheet" href="style.css">
    <script defer src="main.js"></script>
</head>
<body>
    <div class="clock">
        <div class="numbers">
            <span style="--i: 0;"><b>12</b></span>
            <span style="--i: 1;"><b>3</b></span>
            <span style="--i: 2;"><b>6</b></span>
            <span style="--i: 3;"><b>9</b></span>
            <div class="circle" id="hr"><i></i></div>
            <div class="circle" id="mn"><i></i></div>
            <div class="circle" id="sc"><i></i></div>
        </div>
    </div>
</body>
</html>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    position: relative;
}

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

.clock {
    width: 300px;
    height: 300px;
    background-color: #C9D5E0;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50px;
    box-shadow: 30px 30px 30px -10px rgba(0, 0, 0, .1), inset 15px 15px 10px rgba(255, 255, 255, .75), -15px -15px 35px rgba(255, 255, 255, .55), inset -1px -1px 10px rgba(0, 0, 0, .2);
}

.clock::before {
    content: '';
    position: absolute;
    width: 4px;
    height: 4px;
    background-color: #E91E63;
    border-radius: 50%;
    z-index: 1000;
    box-shadow: 0 0 0 1px #E91E63, 0 0 0 3px #FFF, 0 0 5px 5px rgba(0, 0, 0, .15);
}

.clock .numbers {
    position: absolute;
    inset: 35px;
    background-color: #152B4A;
    border-radius: 50%;
    box-shadow: 5px 5px 15px #152B4A66, inset 5px 5px 5px rgba(255, 255, 255, .55), -6px -6px 10px rgba(255, 255, 255, 1);
}

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

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

.clock .numbers::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(0);
    }
}

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

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

.clock .numbers .circle i {
    position: absolute;
    width: 3px;
    height: 50%;
    background-color: #FFF;
    transform-origin: bottom;
}

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

.clock .numbers .circle#mn i {
    transform: scaleY(.45);
}

.clock .numbers .circle#sc i {
    width: 2px;
    transform: scaleY(.55);
    background-color: #E91E63;
    box-shadow: 0 30px 0 #E91E63;
}
let hr = document.querySelector("#hr");
let mn = document.querySelector("#mn");
let sc = document.querySelector("#sc");

setInterval(() => {
  let day = new Date();

  let hh = day.getHours() * 30;
  let mm = day.getMinutes() * 6;
  let ss = day.getSeconds() * 6;

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

'HTML _CSS' 카테고리의 다른 글

Pendulum Loading  (0) 2023.01.23
Blob Effect Micro Interaction  (0) 2023.01.22
Responsive Tabs  (0) 2023.01.19
3D Cube Slider  (0) 2023.01.17
Stylish Checkbox  (0) 2023.01.15
'HTML _CSS' Related Articles more