Jadikan Setiap Detik mempunyai Tema! ⏰ menggunakan @property dan hsl()

? pengenalan

Pernahkah anda ingin mencipta jam yang berfungsi lebih daripada sekadar memberitahu masa? Bagaimana jika setiap detik yang berlalu boleh membawa tema baharu yang segar? Dengan CSS @property dan kuasa manipulasi warna hsl(), anda boleh! Dalam artikel ini, saya akan membimbing anda melalui proses penciptaan "Jam Tema" dinamik dan menarik secara visual yang menukar warnanya (aka temanya) setiap saat, membawa kehidupan baharu pada setiap detik!.

?️ Konsep

Idea di sebalik "Jam Tema" adalah mudah tetapi menarik: seiring dengan berlalunya masa, penampilan jam berubah. Kami akan memanfaatkan sifat tersuai CSS untuk menghidupkan rona warna (iaitu sudut dalam darjah) dan mengemas kini tema jam setiap saat (juga untuk setiap minit dan jam juga). Hasilnya? Jam yang lancar dan sentiasa berubah-ubah yang memukau kerana ia berfungsi.

? Demo & Kod

Nah, inilah kod penuh untuk "Jam Tema." Saya akan memecahkannya untuk memahami cara setiap bahagian menyumbang kepada kesan keseluruhan.

? Memecahkan Kod

1.Css Custom Properties dan @property: Keajaiban di sebalik jam perubahan tema ini terletak pada penggunaan sifat tersuai CSS dan peraturan @property. Kami mentakrifkan sifat tersuai --sudut yang mengawal rona warna jam menggunakan fungsi hsl(). Dengan menganimasikan sifat ini selama 60 saat dengan peraturan @keyframes, kami mencapai peralihan warna yang berterusan.

• Harta Tersuai --sudut: Ini mengawal rona warna hsl(), menukar tema secara dinamik. dan juga menjadikan harta tersuai boleh animasi, membolehkan peralihan yang lancar.
• CSS @keyframes anim: Animasi ini memutarkan nilai rona daripada 0 kepada 360 selama 60 saat, berbasikal melalui keseluruhan spektrum warna.

2.Penukaran Tema Dinamik: Butang togol membolehkan pengguna bertukar antara tema terang dan gelap. Klik butang menogol kelas gelap pada elemen html, mengubah penampilan jam.

• Togol Mod Cerah/Gelap: Tema boleh ditukar dengan butang yang mengemas kini penampilan jam secara dinamik.
• Animasi Putaran Bekas: Bekas jam berputar apabila tema berubah, menambah kesan peralihan yang halus.

3. Kemas Kini Jam dan Masa: Bahagian JavaScript kod mengendalikan pengemaskinian jarum jam dan paparan masa digital. Fungsi setTime mengira semula kedudukan jam, minit dan jarum kedua setiap saat, sambil turut mengemas kini paparan masa dan tarikh.

• Fungsi "skala": Menukar masa semasa kepada darjah yang sepadan untuk putaran jarum jam.

- Kemas Kini Masa Nyata: Jarum jam dan masa digital dikemas kini setiap saat agar sepadan dengan masa semasa.

? Menyatukan Semua bahagian

Dengan menggabungkan kuasa sifat tersuai CSS, manipulasi warna hsl() dan peraturan @property, kami telah mencipta jam yang bukan sahaja memberitahu masa tetapi juga berubah dalam penampilan dengan setiap saat yang berlalu. Projek ini ialah contoh yang bagus tentang cara CSS boleh digunakan untuk mencipta elemen web yang interaktif dan menarik secara visual dengan JavaScript yang minimum.

Titik suka ❤️, dan Ikuti untuk lebih banyak alishata128

Atas ialah kandungan terperinci Jadikan Setiap Detik mempunyai Tema! ⏰ menggunakan @property dan hsl(). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!