? Introducción

¿Alguna vez has querido crear un reloj que haga algo más que solo decir la hora? ¿Qué pasaría si cada segundo que pasa pudiera traer un tema nuevo y fresco? ¡Con CSS @property y el poder de la manipulación del color hsl(), puedes hacerlo! En este artículo, lo guiaré a través del proceso de creación de un "Reloj temático" dinámico y visualmente atractivo que cambia sus colores (también conocido como tema) cada segundo, ¡dando una nueva vida a cada momento!.

?️ El concepto

La idea detrás del "Reloj temático" es simple pero cautivadora: a medida que pasa el tiempo, la apariencia del reloj cambia. Aprovecharemos las propiedades personalizadas de CSS para animar el tono de los colores (bueno, es un ángulo en grados) y actualizaremos el tema del reloj cada segundo (también cada minuto y hora). ¿El resultado? Un reloj fluido y en constante cambio que es tan fascinante como funcional.

? Demostración y código

Bueno, aquí está el código completo para el "Reloj temático". Lo desglosaré para entender cómo cada parte contribuye al efecto general.

? Rompiendo el código

1.Propiedades personalizadas de CSS y @property: la magia detrás de este reloj que cambia de tema radica en el uso de propiedades personalizadas de CSS y la regla @property. Definimos una propiedad personalizada: ángulo que controla el tono de los colores del reloj usando la función hsl(). Al animar esta propiedad durante 60 segundos con la regla @keyframes, logramos una transición de color continua.

• Propiedad personalizada --angle: Esto controla el tono del color hsl(), cambiando dinámicamente el tema. y también hace que la propiedad personalizada sea animable, lo que permite transiciones suaves.
• CSS @keyframes anim: esta animación rota el valor de tono de 0 a 360 durante 60 segundos, recorriendo todo el espectro de colores.

2.Cambio dinámico de tema: el botón de alternancia permite a los usuarios cambiar entre temas claros y oscuros. Al hacer clic en el botón se alterna una clase oscura en el elemento html, alterando la apariencia del reloj.

• Alternar modo claro/oscuro: el tema se puede cambiar con un botón que actualiza dinámicamente la apariencia del reloj.
• Animación de rotación del contenedor: el contenedor del reloj gira cuando cambia el tema, agregando un efecto de transición sutil.

3.Actualización del reloj y la hora: la parte JavaScript del código maneja la actualización de las manecillas del reloj y la visualización de la hora digital. La función setTime recalcula las posiciones de las manecillas de la hora, los minutos y los segundos cada segundo, al mismo tiempo que actualiza la visualización de la hora y la fecha.

• Función "escala": Convierte la hora actual en grados correspondientes para la rotación de las manecillas del reloj.

- Actualizaciones en tiempo real: las manecillas del reloj y la hora digital se actualizan cada segundo para coincidir con la hora actual.

? Reuniendo todas las partes

Al combinar el poder de las propiedades personalizadas de CSS, la manipulación del color hsl() y la regla @property, hemos creado un reloj que no solo indica la hora sino que también evoluciona en apariencia con cada segundo que pasa. Este proyecto es un gran ejemplo de cómo se puede utilizar CSS para crear elementos web interactivos y visualmente atractivos con un mínimo de JavaScript.

Dale me gusta ❤️ y síguenos para obtener más información sobre alishata128