? Einführung

Wollten Sie schon immer eine Uhr schaffen, die mehr kann, als nur die Zeit anzuzeigen? Was wäre, wenn jede Sekunde, die vergeht, ein frisches neues Thema mit sich bringen könnte? Mit CSS @property und der Leistungsfähigkeit der hsl()-Farbmanipulation ist das möglich! In diesem Artikel begleite ich Sie durch den Entstehungsprozess einer dynamischen und visuell ansprechenden „Themenuhr“, die jede Sekunde ihre Farben (auch bekannt als ihr Thema) ändert und so jedem Moment neues Leben einhaucht!.

?️ Das Konzept

Die Idee hinter der „Theme Clock“ ist einfach und dennoch faszinierend: Mit der Zeit verändert sich das Aussehen der Uhr. Wir nutzen benutzerdefinierte CSS-Eigenschaften, um den Farbton (also einen Winkel in Grad) zu animieren und das Thema der Uhr jede Sekunde zu aktualisieren (auch für jede Minute und Stunde). Das Ergebnis? Eine nahtlose, sich ständig ändernde Uhr, die ebenso faszinierend wie funktional ist.

? Demo & Code

Nun, hier ist der vollständige Code für die „Theme Clock“. Ich werde es aufschlüsseln, um zu verstehen, wie jeder Teil zum Gesamteffekt beiträgt.

? Den Code aufschlüsseln

1. Benutzerdefinierte CSS-Eigenschaften und @property: Die Magie hinter dieser Uhr, die das Thema verändert, liegt in der Verwendung von benutzerdefinierten CSS-Eigenschaften und der @property-Regel. Wir definieren eine benutzerdefinierte Eigenschaft --angle, die den Farbton der Uhrenfarben mithilfe der Funktion hsl() steuert. Indem wir diese Eigenschaft über 60 Sekunden mit der @keyframes-Regel animieren, erreichen wir einen kontinuierlichen Farbübergang.

• Benutzerdefinierte Eigenschaft --angle: Dies steuert den Farbton der hsl()-Farbe und ändert das Thema dynamisch. und macht die benutzerdefinierte Eigenschaft außerdem animierbar, was reibungslose Übergänge ermöglicht.
• CSS @keyframes anim: Diese Animation dreht den Farbtonwert innerhalb von 60 Sekunden von 0 auf 360 und durchläuft dabei das gesamte Farbspektrum.

2.Dynamischer Themenwechsel: Mit der Umschalttaste können Benutzer zwischen hellen und dunklen Themen wechseln. Durch Klicken auf die Schaltfläche wird eine dunkle Klasse im HTML-Element umgeschaltet, wodurch sich das Erscheinungsbild der Uhr ändert.

• Hell-/Dunkel-Modus umschalten: Das Thema kann mit einer Schaltfläche umgeschaltet werden, die das Erscheinungsbild der Uhr dynamisch aktualisiert.
• Container-Rotationsanimation: Der Uhrencontainer dreht sich, wenn sich das Thema ändert, und fügt so einen subtilen Übergangseffekt hinzu.

3. Uhr- und Zeitaktualisierung: Der JavaScript-Teil des Codes kümmert sich um die Aktualisierung der Uhrzeiger und der digitalen Zeitanzeige. Die setTime-Funktion berechnet jede Sekunde die Positionen der Stunden-, Minuten- und Sekundenzeiger neu und aktualisiert gleichzeitig die Uhrzeit- und Datumsanzeige.

• Funktion „Skala“: Wandelt die aktuelle Zeit in entsprechende Gradzahlen für die Drehung der Uhrzeiger um.

- Echtzeitaktualisierungen: Die Uhrzeiger und die digitale Zeit werden jede Sekunde aktualisiert, um mit der aktuellen Zeit übereinzustimmen.

? Alle Teile zusammenbringen

Durch die Kombination der Leistungsfähigkeit benutzerdefinierter CSS-Eigenschaften, der hsl()-Farbmanipulation und der @property-Regel haben wir eine Uhr erstellt, die nicht nur die Zeit anzeigt, sondern sich auch mit jeder Sekunde optisch weiterentwickelt. Dieses Projekt ist ein großartiges Beispiel dafür, wie CSS verwendet werden kann, um mit minimalem JavaScript interaktive und optisch ansprechende Webelemente zu erstellen.

Schreiben Sie ein „Gefällt mir“ ❤️ und folgen Sie uns für mehr alishata128