? Introduction

Avez-vous déjà voulu créer une horloge qui fasse plus que simplement indiquer l'heure ? Et si chaque seconde qui passe pouvait apporter un nouveau thème ? Avec CSS @property et la puissance de manipulation des couleurs hsl(), c'est possible ! Dans cet article, je vais vous guider à travers le processus de création d'une « horloge thématique » dynamique et visuellement attrayante qui change de couleurs (c'est-à-dire son thème) à chaque seconde, apportant une nouvelle vie à chaque instant !.

?️ Le concept

L'idée derrière « Theme Clock » est simple mais captivante : à mesure que le temps passe, l'apparence de l'horloge change. Nous exploiterons les propriétés personnalisées CSS pour animer la teinte des couleurs (enfin, c'est un angle en degrés) et mettre à jour le thème de l'horloge chaque seconde (également pour chaque minute et heure également). Le résultat ? Une horloge transparente et en constante évolution, aussi fascinante que fonctionnelle.

? Démo et code

Eh bien, voici le code complet de "Theme Clock". Je vais le décomposer pour comprendre comment chaque partie contribue à l'effet global.

? Décrypter le code

1.Propriétés personnalisées CSS et @property : La magie derrière cette horloge de changement de thème réside dans l'utilisation des propriétés personnalisées CSS et de la règle @property. Nous définissons une propriété personnalisée --angle qui contrôle la teinte des couleurs de l'horloge à l'aide de la fonction hsl(). En animant cette propriété sur 60 secondes avec la règle @keyframes, nous obtenons une transition de couleur continue.

• Propriété personnalisée --angle : ceci contrôle la teinte de la couleur hsl(), modifiant dynamiquement le thème. et rend également la propriété personnalisée animable, permettant des transitions fluides.
• CSS @keyframes anim : cette animation fait pivoter la valeur de teinte de 0 à 360 sur 60 secondes, parcourant tout le spectre de couleurs.

2.Commutation de thème dynamique : le bouton bascule permet aux utilisateurs de basculer entre les thèmes clairs et sombres. Le clic sur le bouton fait basculer une classe sombre sur l'élément HTML, modifiant ainsi l'apparence de l'horloge.

• Basculement du mode clair/sombre : le thème peut être changé avec un bouton qui met à jour dynamiquement l'apparence de l'horloge.
• Animation de rotation du conteneur : le conteneur de l'horloge tourne lorsque le thème change, ajoutant un effet de transition subtil.

3.Mise à jour de l'horloge et de l'heure : la partie JavaScript du code gère la mise à jour des aiguilles de l'horloge et l'affichage numérique de l'heure. La fonction setTime recalcule les positions des aiguilles des heures, des minutes et des secondes chaque seconde, tout en mettant également à jour l'affichage de l'heure et de la date.

• Fonction « échelle » : convertit l'heure actuelle en degrés correspondants pour la rotation des aiguilles de l'horloge.

- Mises à jour en temps réel : les aiguilles de l'horloge et l'heure numérique sont mises à jour toutes les secondes pour correspondre à l'heure actuelle.

? Rassembler toutes les pièces

En combinant la puissance des propriétés personnalisées CSS, la manipulation des couleurs hsl() et la règle @property, nous avons créé une horloge qui non seulement indique l'heure, mais évolue également en apparence à chaque seconde qui passe. Ce projet est un excellent exemple de la façon dont CSS peut être utilisé pour créer des éléments Web interactifs et visuellement attrayants avec un minimum de JavaScript.

Lâchez un like ❤️ et suivez pour plus d'alishata128