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!.
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.
Nah, inilah kod penuh untuk "Jam Tema." Saya akan memecahkannya untuk memahami cara setiap bahagian menyumbang kepada kesan keseluruhan.
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.
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.
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.
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!