Membuat jam dengan fungsi trigonometri CSS Sin () dan cos () baru

Ciri -ciri baru CSS: Sin () dan Cos () Fungsi Trigonometrik Membuat Kesan Jam

Versi terbaru Firefox dan Safari telah menyokong fungsi trigonometri CSS! Ini membawa keupayaan pengkomputeran matematik yang kuat kepada CSS dan memperluaskan kemungkinan tak terhingga. Tutorial ini akan memberi tumpuan kepada fungsi dosa () dan cos () dan membuat jam menggunakannya. Walaupun fungsi trigonometri lain seperti tan () akan datang tidak lama lagi, fungsi dosa () dan cos () sangat sesuai untuk tujuan mengatur teks di sepanjang lilitan, yang dilaksanakan oleh Chris menggunakan Sass Mixin pada trik CSS enam tahun yang lalu, mari kita gunakan semula dengan teknologi terkini.

kesan sasaran (kini hanya disokong oleh Firefox dan Safari):

Kami mengatur aksara teks di sepanjang lilitan untuk membentuk muka jam. Struktur HTML awal adalah seperti berikut:

<div class="clock">
  <div class="clock-face">
    <time datetime="12:00">12</time><time datetime="1:00">1</time><time datetime="2:00">2</time><time datetime="3:00">3</time><time datetime="4:00">4</time><time datetime="5:00">5</time><time datetime="6:00">6</time><time datetime="7:00">7</time><time datetime="8:00">8</time><time datetime="9:00">9</time><time datetime="10:00">10</time><time datetime="11:00">11</time>
  </div>
</div>

Seterusnya, tambahkan gaya asas ke bekas

, gunakan tag .clock dan tambahkan atribut <time></time>: datetime

.clock {
  --_ow: clamp(5rem, 60vw, 40rem);
  --_w: 88cqi;
  aspect-ratio: 1;
  background-color: tomato;
  border-radius: 50%;
  container-type: inline;
  display: grid;
  height: var(--_ow);
  place-content: center;
  position: relative;
  width: var(--_ow);
}

Ini hanya untuk membuat bentuk asas dan warna latar belakang untuk memudahkan pemerhatian kesan. Perhatikan bahawa kami menyimpan nilai lebar dalam pembolehubah CSS dan akan digunakan kemudian.

Sekarang, tambahkan pembolehubah

untuk menyimpan jejari bulatan, yang sama dengan separuh lebar bulatan, dan melaksanakannya menggunakan fungsi --_r: calc()

.clock {
  --_w: 300px;
  --_r: calc(var(--_w) / 2);
  /* rest of styles */
}

Pengiraan matematik: lilitan adalah 360 darjah, jam mempunyai 12 nombor, setiap digit jarak 30 darjah (360/12). Secara matematik, bulatan bermula pada pukul 3, jadi 12 jam sebenarnya -90 darjah, iaitu 270 darjah (360 - 90).

Tambah Variable

Tetapkan nilai darjah setiap nombor, kenaikan dalam 30 darjah: --_d

.clock time:nth-child(1) { --_d: 270deg; }
.clock time:nth-child(2) { --_d: 300deg; }
.clock time:nth-child(3) { --_d: 330deg; }
/* ... rest of the numbers ... */

Sekarang, gunakan fungsi dosa () dan cos () untuk mengira koordinat x dan y setiap nombor:

formula koordinat x: jejari (radius * cos (darjah))

--_x: calc(var(--_r) + (var(--_r) * cos(var(--_d))));

y Formula koordinat: jejari (radius * dosa (darjah))

--_y: calc(var(--_r) + (var(--_r) * sin(var(--_d))));

Tambahkan gaya asas kepada nombor supaya mereka benar -benar diposisikan dan gunakan koordinat yang dikira:

.clock-face time {
  --_x: calc(var(--_r) + (var(--_r) * cos(var(--_d))));
  --_y: calc(var(--_r) + (var(--_r) * sin(var(--_d))));
  --_sz: 12cqi;
  display: grid;
  height: var(--_sz);
  left: var(--_x);
  place-content: center;
  position: absolute;
  top: var(--_y);
  width: var(--_sz);
}

Untuk meletakkan kedudukan dengan lebih tepat, apabila mengira jejari, saiz nombor perlu ditolak:

--_r: calc((var(--_w) - var(--_sz)) / 2);

Tukar warna untuk menjadikannya lebih cantik.

Seterusnya, tambahkan jam, minit dan kedua tangan:

tambah struktur html:

<div class="arm hours"></div>
<div class="arm minutes"></div>
<div class="arm seconds"></div>

Tambah Gaya:

Akhirnya, gunakan JavaScript untuk menetapkan masa semasa:

.arm {
  /* ... styles ... */
}

.seconds { /* ... styles ... */ }
.minutes { /* ... styles ... */ }
.hours { /* ... styles ... */ }

@keyframes turn { /* ... animation ... */ }

Tambahkan pemprosesan keserasian penyemak imbas:

// ... JavaScript code to set initial time ...

Kesan Akhir: Jam CSS Lengkap! Pada masa ini, hanya penyemak imbas Firefox dan Safari yang disokong.

@supports not (left: calc(1px * cos(45deg))) {
  /* fallback styles */
}

Di samping itu, jam boleh diubah menjadi perpustakaan imej bulat atau corak kreatif yang lain.

Atas ialah kandungan terperinci Membuat jam dengan fungsi trigonometri CSS Sin () dan cos () baru. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!