비전공자 개발일기

Simple Countdown 본문

HTML _CSS

Simple Countdown

HiroDaegu 2022. 8. 10. 00:27
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>SIMPLE COUNTDOWN</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h2>Click 👇 to start/pause the timer</h2>
  <input type="checkbox" id="go">
  <label class="timer" for="go">
     <div class="d"></div>
     <div class="d"></div>
     <div class="d"></div>
     <div class="d"></div>
  </label>
</body>
</html>
@property --n {
  syntax: "<integer>";
  inherits: true;
  initial-value: 0;
}
@property --t {
  syntax: "<color>";
  inherits: true;
  initial-value: #000;
}
@property --r {
  syntax: "<color>";
  inherits: true;
  initial-value: #000;
}
@property --b {
  syntax: "<color>";
  inherits: true;
  initial-value: #000;
}
@property --l {
  syntax: "<color>";
  inherits: true;
  initial-value: #000;
}

.d {
  width: 77px; /* size */
  display: inline-grid;
  aspect-ratio: 0.55;
}
.d:before,
.d:after {
  content: "";
  padding: 20%;
  background: conic-gradient(from -45deg at 50% 45%, var(--t) 90deg, #0000 0),
    conic-gradient(from 45deg at 55% 50%, var(--r) 90deg, #0000 0),
    conic-gradient(from 135deg at 50% 55%, var(--b) 90deg, #0000 0),
    conic-gradient(from 225deg at 45% 50%, var(--l) 90deg, #0000 0);
  --m: conic-gradient(#000 0 0) content-box, conic-gradient(#000 0 0);
  -webkit-mask: var(--m);
  mask: var(--m);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  clip-path: polygon(
    25% 0,
    75% 0,
    100% 25%,
    100% 75%,
    75% 100%,
    25% 100%,
    0 75%,
    0 25%
  );
  transition: --t 0.45s, --l 0.45s, --b 0.45s, --r 0.45s;
}
.d:after {
  margin-top: -20%;
  --t: #0000;
}
.d {
  --1: (var(--n) - 1) * (var(--n) - 1);
  --2: (var(--n) - 2) * (var(--n) - 2);
  --3: (var(--n) - 3) * (var(--n) - 3);
  --4: (var(--n) - 4) * (var(--n) - 4);
  --5: (var(--n) - 5) * (var(--n) - 5);
  --6: (var(--n) - 6) * (var(--n) - 6);
  --7: (var(--n) - 7) * (var(--n) - 7);
  --8: (var(--n) - 8) * (var(--n) - 8);
  --9: (var(--n) - 9) * (var(--n) - 9);
}

.d:before {
  --t: rgb(
    clamp(30, var(--1) * var(--4) * 999, 250)
      clamp(30, var(--1) * var(--4) * 999, 250) 30
  );
  --r: rgb(
    clamp(30, var(--5) * var(--6) * 999, 250)
      clamp(30, var(--5) * var(--6) * 999, 250) 30
  );
  --b: rgb(
    clamp(30, var(--n) * var(--1) * var(--7) * 999, 250)
      clamp(30, var(--n) * var(--1) * var(--7) * 999, 250) 30
  );
  --l: rgb(
    clamp(30, var(--1) * var(--2) * var(--3) * var(--7) * 999, 250)
      clamp(30, var(--1) * var(--2) * var(--3) * var(--7) * 999, 250) 30
  );
}
.d:after {
  --r: rgb(clamp(30, var(--2) * 999, 250) clamp(30, var(--2) * 999, 250) 30);
  --b: rgb(
    clamp(30, var(--1) * var(--4) * var(--7) * 999, 250)
      clamp(30, var(--1) * var(--4) * var(--7) * 999, 250) 30
  );
  --l: rgb(
    clamp(
        30,
        var(--1) * var(--3) * var(--4) * var(--5) * var(--7) * var(--9) * 999,
        250
      )
      clamp(
        30,
        var(--1) * var(--3) * var(--4) * var(--5) * var(--7) * var(--9) * 999,
        250
      )
      30
  );
}
.timer .d:nth-child(1) {
  animation: d6 3600s linear infinite;
}
.timer .d:nth-child(2) {
  animation: d9 600s linear infinite;
}
.timer .d:nth-child(3) {
  animation: d6 60s linear infinite;
  grid-column: 4;
}
.timer .d:nth-child(4) {
  animation: d9 10s linear infinite;
}
@keyframes d9 {
  0%,
  9.95% {
    --n: 0;
  }
  10%,
  19.95% {
    --n: 1;
  }
  20%,
  29.95% {
    --n: 2;
  }
  30%,
  39.95% {
    --n: 3;
  }
  40%,
  49.95% {
    --n: 4;
  }
  50%,
  59.95% {
    --n: 5;
  }
  60%,
  69.95% {
    --n: 6;
  }
  70%,
  79.95% {
    --n: 7;
  }
  80%,
  89.95% {
    --n: 8;
  }
  90%,
  99.95% {
    --n: 9;
  }
}
@keyframes d6 {
  0%,
  16.64% {
    --n: 0;
  }
  16.67%,
  33.30% {
    --n: 1;
  }
  33.33%,
  49.96% {
    --n: 2;
  }
  50.00%,
  66.63% {
    --n: 3;
  }
  66.67%,
  83.30% {
    --n: 4;
  }
  83.33%,
  99.97% {
    --n: 5;
  }
}

.timer {
  display: grid;
  cursor: pointer;
  grid-template-columns: 1fr 1fr 15px 1fr 1fr;
  grid-gap: 15px;
  background: linear-gradient(rgb(250 250 30) 0 0) 50% 30%/15px 15px no-repeat,
    linear-gradient(rgb(250 250 30) 0 0) 50% 70%/15px 15px no-repeat;
}
#go {
  display: none;
}
#go ~ .timer .d {
  animation-play-state: paused;
}
#go:checked ~ .timer .d {
  animation-play-state: running;
}
#go:checked ~ .timer {
  filter: hue-rotate(45deg);
}

body {
  margin: 0;
  height: 100vh;
  display: grid;
  place-content: center;
  background: #000;
}

h2 {
  color: #fff;
  font-family: sans-serif;
  margin: 0 auto 20px;
}
728x90
LIST

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

Fingerprint Scanner Animation  (0) 2022.08.13
Responsive Vertical Timeline  (0) 2022.08.11
404 Error Page  (0) 2022.08.09
3D Animation Effect  (0) 2022.08.08
Scroll To Top  (0) 2022.08.06
'HTML _CSS' Related Articles more