Altın Konu Basit Html Css Geri Sayım Sayacı

Epiméthé · 10 Ağu 2022

Geri sayım projemizin temel yapısını oluşturalım. Html Kullanarak

HTML Kodu

HTML:

<!DOCTYPE html>
<html lang="en">

<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>Css Only Timer</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>

Bu, geri sayım projemizin Html kodudur. Ortak Kod kullanırız ve ardından css dosyasını bağlarız, böylece bir sonraki adım sadece css dosyasındaki koddur. Ve bir girdi tipi onay kutusu kullanıyoruz, böylece zamanlayıcının başlatılıp başlatılmayacağına karar verebiliriz, ardından etiketlerde bazı divler kullanabiliriz. Yani bu sadece Html kullanan temel bir kod yapısıdır.

Aşağıda, tam stil ve geri sayım için css kodu yazmaktansa yalnızca Html koduyla

çıktısını görüyoruz.

HTML Çıkışı

Css Kodunu Yazalım.

CSS:

@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;
}

Geri sayım projesi için tüm uzun Css kodumuz bu. property css kodunda birçok yeni seçici kullanıyoruz. En boy oranı, öncesi, sonrası, maske etiketi ve birçok yeni şey kullanıyoruz. Sonra kelepçe kullanıyoruz (bu, javascript'te bir işlevimiz olduğu gibi css'deki bir işlevdir). Sonra her div'i etiketlere göre biçimlendirmek için nth-child seçiciyi kullanırız. Ardından geri sayım projesini başlatmak için Anahtar Kare animasyonunu kullanın.