Die grundlegende Form einer einzelnen Weltuhr, also das metallische Gehäuse mit dem glänzenden Rand, den noch unbewegten Zeigern für Sekunden, Minuten und Stunden, sowie einer einzelnen Zeitmarke auf dem Ziffernblatt, entsteht unter Verwendung dieser CSS-Regeln:
Die Zeiger sowie die Zeitmarken sind auf dem Ziffernblatt absolut positioniert. Noch liegen alle Ziffernmarken auf 12:00 direkt übereinander. Die korrekte Position der elf Zeitmarkierungen zur Einteilung des Ziffernblatts (Stunden 1:00 bis 11:00) lässt sich mit dem :nth-child-Selektor wie folgt ableiten:
Um das noch stillgelegte Uhrwerk zum Leben zu erwecken, bedarf es CSS-Transforms und einer geeigneten Keyframe-Animation. Damit sich die Anzeigevorrichtung für Sekunden, Minuten und Stunden im jeweils richtigen Takt bewegt, wird zwischen dem Sekunden-, Minuten- und Stundenzeiger unterschieden. Der Sekundenzeiger wird wie folgt animiert:
und weiter je 1 und 2/3 Prozent (also 15 %, 16.67 %, 18.33 % und so weiter) in 6-Grad-Schritten (also 336deg, 342deg, 348deg und so weiter) bis zu 642deg bei 100 Prozent:
Wer auf der Website mehr als nur eine einzige Weltuhr anbringen möchte, muss den Stundenzeiger jeder einzelnen Zeitzone separat animieren. Im Falle von drei Weltuhren gelingt diese Aufteilung mittels
.stundenzeiger {
-webkit-transform-origin: center 83.33333%;
}
#weltuhr1 .stundenzeiger {
-webkit-transform: rotate(375deg);
-webkit-animation: stundenzeiger1 43200s linear infinite;
}
#weltuhr2 .stundenzeiger {
-webkit-transform: rotate(195deg);
-webkit-animation: stundenzeiger2 43200s linear infinite;
}
#weltuhr3 .stundenzeiger {
-webkit-transform: rotate(615deg);
-webkit-animation: stundenzeiger3 43200s linear infinite;
}
Die Animation der Stundenzeiger der drei Weltuhren erfolgt zum Beispiel unter Angabe der folgenden Keyframes
Damit die tatsächlich angezeigte Uhrzeit mit der aktuellen Uhrzeit der jeweiligen Zeitzone übereinstimmt, können Sie die aktuelle Zeit via PHP auslesen. Ohne PHP haben Sie eine vollkommen lauffähige Uhr in reinem CSS3, nur die angezeigte Uhrzeit kann natürlich nicht stimmen, obwohl sich die drei Zeiger rhythmisch korrekt bewegen.
© Internet Magazin
