Ratgeber: "HTML, CSS, Javascript & PHP"

So erstellen Sie eine CSS-Weltuhr

Dank CSS-Transforms können Sie eine animierte Uhr mit reinem HTML und CSS3 (also ohne Javascript) umsetzen. Wie zeigen Ihnen wie es geht.

So erstellen Sie eine CSS-Weltuhr

© Internet Magazin

So erstellen Sie eine CSS-Weltuhr

Das Markup für eine einzelne Uhr wird zum Beispiel wie folgt aufgebaut

<div id="weltuhr1" class="weltuhr"><div class="innenrand"><div class="ziffernblatt"><div class="sekundenzeiger"></div><div class="minutenzeiger"></div><div class="stundenzeiger"></div><div class="mitte"></div><ol class="markierungen"><li>1</li><li>2</li><li>3</li><!-- ... für alle 12 Stunden --><li>12</li></ol></div></div>

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:

.weltuhr {
position: relative;
display: inline-block;
padding: 25px;
margin: 30px;
background: -webkit-gradient(linear, left 55%, right 45%,
from(#555555), to(#555555), color-stop(50%, #dddddd));
-webkit-box-shadow: 4px 14px 12px rgba(0, 0, 0, 0.5);
-webkit-border-radius: 300px;
}
.innenrand {
padding: 4px;
background: -webkit-gradient(linear, 45% top, 55% bottom,
from(#222222), to(#ffffff), color-stop(30%, #666666),
color-stop(50%, #eeeeee));
-webkit-border-radius: 300px;
}
.ziffernblatt {
position: relative;
width: 200px;
height: 200px;
background: -webkit-gradient(linear, 45% top, 55% bottom,
from(#bbbbbb), to(#ffffff), color-stop(40%, #eeeeee));
-webkit-border-radius: 300px;
}
.sekundenzeiger { /* die Optik */
position: absolute;
left: 49.5%;
height: 58%;
top: 2%;
width: 1%;
background: #ff0000;
z-index: 3;
}
.minutenzeiger { /* die Optik */
position: absolute;
left: 48.5%;
height: 48%;
top: 10%;
width: 3%;
background: #000000;
z-index: 2;
}
.stundenzeiger { /* die Optik */
position: absolute;
left: 48%;
height: 36%;
top: 20%;
width: 4%;
background: #000000;
z-index: 1;
}
.mitte {
position: absolute;
left: 47.5%;
top: 47.5%;
height: 5%;
width: 5%;
background: #333333;
z-index: 4;
-webkit-border-radius: 50px;
}
.markierungen { margin: 0; }
.markierungen li {
margin: 0;
list-style: none;
padding: 0;
position: absolute;
top: 0%;
left: 49%;
width: 1%;
height: 5%;
text-indent: -9999px;
overflow: hidden;
background: #000000;
-webkit-transform-origin: center 1000%;
}

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:

.markierungen li:nth-child(2) { -webkit-transform:
rotate(30deg); }
.markierungen li:nth-child(3) { -webkit-transform:
rotate(60deg); }
.markierungen li:nth-child(4) { -webkit-transform:
rotate(90deg); }

und weiter für die Selektoren li:nth-child(5) bis li:nth-child(12) je alle 30 Grad bis 330 Grad:

.markierungen li:nth-child(12) { -webkit-transform:
rotate(330deg); }

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:

.sekundenzeiger {
-webkit-transform: rotate(282deg);
-webkit-animation: sekundenzeiger 60s cubic-bezier(0, 1,
0, 1) infinite;
-webkit-transform-origin: center 83.33333%;
}
@-webkit-keyframes sekundenzeiger {
0% { -webkit-transform: rotate(282deg); }
1.67% { -webkit-transform: rotate(288deg); }
3.33% { -webkit-transform: rotate(294deg); }
5% { -webkit-transform: rotate(300deg); }
6.67% { -webkit-transform: rotate(306deg); }
8.33% { -webkit-transform: rotate(312deg); }
10% { -webkit-transform: rotate(318deg); }
11.67% { -webkit-transform: rotate(324deg); }
13.33% { -webkit-transform: rotate(330deg); }

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:

95% { -webkit-transform: rotate(624deg); }
96.67% { -webkit-transform: rotate(630deg); }
98.33% { -webkit-transform: rotate(636deg); }
100% { -webkit-transform: rotate(642deg); }
}

Der Minutenzeiger hört auf diese zwei Regelsätze

.minutenzeiger {
-webkit-transform: rotate(180deg);
-webkit-animation: minutenzeiger 3600s linear infinite;
-webkit-transform-origin: center 83.33333%;
}
@-webkit-keyframes minutenzeiger {
0% { -webkit-transform: rotate(180deg); }
100% { -webkit-transform: rotate(540deg); }
}

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

@-webkit-keyframes stundenzeiger1 {
0% { -webkit-transform: rotate(375deg); }
100% { -webkit-transform: rotate(735deg); }
}
@-webkit-keyframes stundenzeiger2 {
0% { -webkit-transform: rotate(195deg); }
100% { -webkit-transform: rotate(555deg); }
}
@-webkit-keyframes stundenzeiger3 {
0% { -webkit-transform: rotate(615deg); }
100% { -webkit-transform: rotate(975deg); }
}

Falls Sie zu guter Letzt die Weltuhren beschriften möchten, können Sie etwa dieses Markup anhängen:

</div><div class="label">Berlin</div></div>

und das CSS-Stylesheet wie folgt abrunden:

body {
background: -webkit-gradient(linear, center top, center
bottom, from(#ffffff), to(#dddddd));
text-align: center;
font-family: "Gill Sans", Calibri, "Trebuchet MS", sans-
serif;
}
.beschriftung {
font-size: 18px;
text-transform: uppercase;
width: 150px;
margin: 0 29px;
padding: 5px 0;
background: #ffffff;
border: 1px solid #dddddd;
position: absolute;
bottom: -70px;
-webkit-box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.3);
}

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.

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
Film Amazon Prime Instant Video Warner Bros Emily Browning
Vorschau auf Film- und Serien-Highlights

Prime Instant Video lockt im Oktober mit Highlights wie "Sucker Punch", "Fifty Shades of Grey", "Spotlight" und der zweiten Staffel von "Ash vs. Evil…