Maison > Article > interface Web > Faites en sorte que chaque seconde ait un thème ! ⏰ en utilisant @property et hsl()
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 !.
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 fluide et en constante évolution, aussi fascinante que fonctionnelle.
Eh bien, voici le code complet de « Theme Clock ». Je vais le décomposer pour comprendre comment chaque partie contribue à l'effet global.
1.Propriétés personnalisées CSS et @property : La magie derrière cette horloge à 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, on obtient une transition de couleur continue.
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 active une classe sombre sur l'élément HTML, modifiant ainsi l'apparence de l'horloge.
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.
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
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!