Membuat jam masa nyata dengan wajah kecerunan kerucut

Kecerunan CSS menawarkan pilihan reka bentuk yang serba boleh, dengan kecerunan radial dan linear yang sering digunakan. Walau bagaimanapun, kecerunan conic, sementara berkuasa, sering diabaikan. Tutorial ini menunjukkan mewujudkan wajah jam yang unik yang memanfaatkan keupayaan kecerunan konik.

Memahami kecerunan conic

Kecerunan konik membuat peralihan warna berputar di sekitar titik pusat, menyokong pelbagai nilai warna. Secara kritikal, from nilai dalam fungsi conic-gradient() mentakrifkan putaran atau titik permulaan. Sudut ini bahkan boleh menjadi negatif, ciri yang akan kita mengeksploitasi.

 Imej latar belakang: Conic-Gradient (dari 45deg, #6e7dab, #5762d5);

Contoh mudah ini mempamerkan keanggunan kecerunan konik.

Membina Struktur Jam

Kami mulakan dengan menstrukturkan HTML untuk jam dan tangannya: (kod HTML ditinggalkan untuk keringkasan, kerana ia adalah markup tangan jam standard).

Seterusnya, kami gaya jam menggunakan CSS, menggunakan pembolehubah CSS untuk penyesuaian mudah. Pembolehubah ini akan dikemas kini secara dinamik dengan JavaScript.

 .clock {
  / * Pembolehubah jam */
  -Hour-Hand-color: #000;
  -Hour-Hand-Decor: 0deg;
  --minute-hand-color: #000;
  --minit-tangan: 0deg;
  -second-hand-color: hotpink;
  -second-hand-darjah: 0deg;

  Kedudukan: Relatif;
  Min-lebar: 320px;
  Lebar: 25VW;
  Ketinggian: 25VW;
  Min-ketinggian: 320px;
  Radius sempadan: 50%;
  Margin: 0 Auto;
  Sempadan: 7px pepejal #000;
}

/ * Gaya tangan jam */
.hand {
  / * ... (gaya tangan yang ditinggalkan untuk keringkasan) ... */
}

Properti transform-origin memastikan putaran tangan yang betul. Sifat tersuai menguruskan sudut tangan, dikemas kini melalui JavaScript untuk masa yang tepat.

Melaksanakan logik JavaScript

Kami memilih elemen jam dan menentukan fungsi setDate() :

 const clock = document.getElementById ("jam");
fungsi setDate () {
  // Pengiraan masa dan kemas kini sudut tangan
}
setDate (); // Persediaan awal

Di dalam setDate() , kami mengira sudut tangan menggunakan Date() :

 const sekarang = tarikh baru ();
const secondSangle = now.getSeconds () * 6;
const minsangle = now.getMinutes () * 6 saat / 60;
const hourangle = ((sekarang.gethours () % 12) / 12) * 360 minsangle / 12;

Pengiraan memastikan kedudukan tangan yang tepat, menyumbang beberapa saat, minit, dan jam. Kami kemudian mengemas kini pembolehubah CSS:

 clock.style.setProperty ("-kedua-dua-darjah", detik "deg");
clock.style.setProperty ("-minit-tangan-darjah", minsangle "deg");
clock.style.setProperty ("-jam tangan-darjah", jam "deg");

Akhirnya, setInterval(setDate, 1000) mengemas kini jam setiap saat.

Mengintegrasikan kecerunan konik

Untuk mengintegrasikan kecerunan konik, kami mengubah suai gaya .clock :

 .clock {
  / * ... (gaya sebelumnya) ... */
  -Start: 0deg;
  --End: 0deg;
  Latar Belakang: Conic-Gradient (dari Var (-Start), RGB (255 255 255) 2DEG, RGB (0 0 0 / 0.5) VAR (-END), RGB (255 255 255) 2DEG, RGB (0 0 0 / 0.7));
}

Kami memperkenalkan --start dan --end untuk mengawal sudut permulaan dan akhir kecerunan. Fungsi setDate() dikemas kini untuk mengira dan menetapkan pembolehubah ini, mengendalikan kes -kes di mana minsAngle melebihi hourAngle menggunakan sudut negatif untuk peralihan lancar. (Kod JavaScript untuk pengiraan sudut kecerunan yang ditinggalkan untuk keringkasan, kerana ia adalah kemas kini mudah dari --start dan --end berdasarkan minsAngle dan hourAngle ).

Ini melengkapkan jam dengan wajah kecerunan konik yang dinamik. Eksperimen dengan skema warna dan gaya yang berbeza untuk membuat reka bentuk jam unik anda sendiri.

Atas ialah kandungan terperinci Membuat jam masa nyata dengan wajah kecerunan kerucut. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!