? Introdução

Você já quis criar um relógio que fizesse mais do que apenas indicar as horas? E se cada segundo que passa pudesse trazer um novo tema? Com CSS @property e o poder da manipulação de cores hsl(), você pode! Neste artigo, vou orientá-lo no processo de criação de um "Relógio Temático" dinâmico e visualmente envolvente que muda de cor (também conhecido como tema) a cada segundo, trazendo uma nova vida a cada momento!.

?️ O Conceito

A ideia por trás do "Relógio Temático" é simples, mas cativante: conforme o tempo passa, a aparência do relógio muda. Aproveitaremos as propriedades personalizadas do CSS para animar o matiz das cores (bem, é um ângulo em graus) e atualizaremos o tema do relógio a cada segundo (também para cada minuto e hora). O resultado? Um relógio contínuo e em constante mudança que é tão fascinante quanto funcional.

? Demonstração e código

Bem, aqui está o código completo para o "Relógio Temático". Vou dividir para entender como cada parte contribui para o efeito geral.

? Quebrando o Código

1. Propriedades personalizadas CSS e @property: A mágica por trás desse relógio de mudança de tema está no uso de propriedades personalizadas CSS e na regra @property. Definimos uma propriedade personalizada --angle que controla o matiz das cores do relógio usando a função hsl(). Ao animar esta propriedade por 60 segundos com a regra @keyframes, alcançamos uma transição de cores contínua.

• Propriedade personalizada --angle: Controla o matiz da cor hsl(), alterando dinamicamente o tema. e também torna a propriedade personalizada animável, permitindo transições suaves.
• CSS @keyframes anim: Esta animação gira o valor do matiz de 0 a 360 ao longo de 60 segundos, percorrendo todo o espectro de cores.

2.Troca dinâmica de tema: O botão de alternância permite aos usuários alternar entre temas claros e escuros. O clique do botão alterna uma classe escura no elemento html, alterando a aparência do relógio.

• Alternar modo claro/escuro: O tema pode ser alternado com um botão que atualiza dinamicamente a aparência do relógio.
• Animação de rotação do contêiner: O contêiner do relógio gira quando o tema muda, adicionando um efeito de transição sutil.

3. Atualização de relógio e hora: A parte JavaScript do código cuida da atualização dos ponteiros do relógio e da exibição da hora digital. A função setTime recalcula as posições dos ponteiros das horas, minutos e segundos a cada segundo, ao mesmo tempo que atualiza a exibição da hora e da data.

• Função "escala": Converte a hora atual em graus correspondentes para a rotação dos ponteiros do relógio.

- Atualizações em tempo real: Os ponteiros do relógio e a hora digital são atualizados a cada segundo para corresponder à hora atual.

? Unindo todas as partes

Ao combinar o poder das propriedades personalizadas CSS, a manipulação de cores hsl() e a regra @property, criamos um relógio que não apenas informa a hora, mas também evolui na aparência a cada segundo que passa. Este projeto é um ótimo exemplo de como CSS pode ser usado para criar elementos web interativos e visualmente atraentes com o mínimo de JavaScript.

Deixe um like ❤️ e siga para mais alishata128