Selbstverständlich können wir eine Uhr nur mit CSS bauen, die die aktuelle Zeit anzeigt!

Bauen wir eine voll funktionsfähige und einstellbare „analoge“ Uhr mit CSS benutzerdefinierten Eigenschaften und der calc() Funktion. Dann wandeln wir sie auch in eine „digitale“ Uhr um. Alles ganz ohne JavaScript!

Hier ist ein kurzer Blick auf die Uhren, die wir bauen werden

Auffrischung der calc() Funktion

CSS-Präprozessoren haben uns ewig mit der Möglichkeit, numerische CSS-Werte zu berechnen, gelockt. Das Problem mit Präprozessoren ist, dass sie den Kontext nicht kennen, nachdem der CSS-Code kompiliert wurde. Deshalb ist es unmöglich zu sagen, dass die Breite Ihres Elements 100 % des Containers minus 50 Pixel sein soll. Dies führt zu einem Fehler in einem Präprozessor

width: 100% - 50px;
// error: Incompatible units: 'px' and '%'

Präprozessoren verarbeiten, wie ihre Name schon sagt, Ihre Anweisungen, aber ihre Ausgabe ist immer noch reines, altes CSS, weshalb sie unterschiedliche Einheiten in Ihren arithmetischen Operationen nicht zusammenführen können. Ana hat sich ausführlich mit den Konflikten zwischen Sass und neuen CSS-Features befasst.

Die gute Nachricht ist, dass native CSS-Berechnungen nicht nur möglich sind, sondern wir mit der calc() Funktion sogar verschiedene Einheiten wie Pixel und Prozent kombinieren können

width: calc(100% - 50px);

calc() kann überall dort verwendet werden, wo eine Länge, Frequenz, ein Winkel, eine Zeit, ein Prozentsatz, eine Zahl oder eine ganze Zahl zulässig ist. Schauen Sie sich den CSS-Leitfaden zu CSS-Funktionen an für einen vollständigen Überblick.

Was dies noch leistungsfähiger macht, ist die Tatsache, dass Sie calc() mit CSS benutzerdefinierten Eigenschaften kombinieren können – etwas, das Präprozessoren nicht handhaben können.

Die Zeiger der Uhr

Legen wir zunächst die Grundlagen mit ein paar benutzerdefinierten Eigenschaften und der Animationsdefinition für die Zeiger der analogen Uhr

:root {
  --second: 1s;
  --minute: calc(var(--second) * 60);
  --hour: calc(var(--minute) * 60);
}
@keyframes rotate {
  from { transform: rotate(0); }
  to { transform: rotate(1turn); }
}

Alles beginnt im Wurzelkontext mit der benutzerdefinierten Eigenschaft --second, wo wir definiert haben, dass eine Sekunde, nun ja, eine Sekunde (1s) sein soll. Alle zukünftigen Werte und Zeitspannen werden davon abgeleitet.

Diese Eigenschaft ist im Wesentlichen das Herzstück unserer Uhr und bestimmt, wie schnell oder langsam alle Zeiger der Uhr laufen. Wenn wir --second auf 1s setzen, passt sich die Uhr der realen Zeit an, aber wir könnten sie mit halber Geschwindigkeit laufen lassen, indem wir sie auf 2s setzen, oder sogar 100 Mal schneller, indem wir sie auf 10ms setzen.

Die erste berechnete Eigenschaft ist der --minute-Zeiger, der 60 Mal eine Sekunde lang sein soll. Wir können auf den Wert der --second-Eigenschaft verweisen und ihn mithilfe von calc() mit 60 multiplizieren

--minute: calc(var(--second) * 60);

Die Eigenschaft des --hour-Zeigers wird nach dem exakt gleichen Prinzip definiert, aber mit dem Wert des --minute-Zeigers multipliziert

--hour: calc(var(--minute) * 60);

Wir möchten, dass sich alle drei Zeiger der Uhr von 0 bis 360 Grad drehen – um die Form des Zifferblatts herum! Der Unterschied zwischen den drei Animationen liegt in der Zeit, die jeder braucht, um die ganze Runde zu drehen. Anstatt 360deg als unseren Vollkreiswert zu verwenden, können wir den voll gültigen CSS-Wert 1turn verwenden.

@keyframes rotate {
  from { transform: rotate(0); }
  to { transform: rotate(1turn); }
}

Diese @keyframes weisen den Browser einfach an, das Element während der Animation einmal zu drehen. Wir haben eine Animation namens rotate definiert, und sie ist nun bereit, dem Sekundenzeiger der Uhr zugewiesen zu werden

.second.hand {
  animation: rotate steps(60) var(--minute) infinite;
}

Wir verwenden die Kurzschreibweise animation, um die Details der Animation zu definieren. Wir haben den Namen der Animation (rotate), die Dauer der Animation (var(--minute), also 60 Sekunden) und die Anzahl der Wiederholungen (infinite, was bedeutet, dass sie niemals aufhört zu laufen) hinzugefügt. steps(60) ist die Animation-Timing-Funktion, die dem Browser sagt, dass er die 1-Turn-Animation in 60 gleichen Schritten ausführen soll. Auf diese Weise tickt der Sekundenzeiger bei jeder Sekunde, anstatt sich sanft entlang des Kreises zu drehen.

Während wir über CSS-Animationen sprechen, können wir eine Animationsverzögerung (animation-delay) definieren, wenn die Animation später starten soll, und wir können ändern, ob die Animation vorwärts oder rückwärts abgespielt werden soll, indem wir animation-direction verwenden. Wir können die Animationen sogar mit animation-play-state anhalten und neu starten.

Die Animation des Minuten- und Stundenzeigers funktioniert sehr ähnlich wie die des Sekundenzeigers. Der Unterschied besteht darin, dass hier keine zusätzlichen Schritte erforderlich sind – diese Zeiger können sich auf eine sanfte, lineare Weise drehen.

Der Minutenzeiger braucht eine Stunde, um eine volle Umdrehung zu vollenden, also

.minute.hand {
  animation: rotate linear var(--hour) infinite;
}

Auf der anderen Hand (Wortspiel beabsichtigt) braucht der Stundenzeiger zwölf Stunden, um die Uhr zu durchlaufen. Wir haben keine separate benutzerdefinierte Eigenschaft für diese Zeitspanne, wie --half-day, also multiplizieren wir --hour mit zwölf

.hour.hand {
  animation: rotate linear calc(var(--hour) * 12) infinite;
}

Sie verstehen wahrscheinlich inzwischen, wie die Zeiger der Uhr funktionieren. Aber es wäre kein vollständiges Beispiel, wenn wir die Uhr nicht tatsächlich bauen würden.

Das Zifferblatt

Bisher haben wir uns nur mit dem CSS-Aspekt der Uhr beschäftigt. Wir brauchen auch etwas HTML, damit das alles funktioniert. Hier ist, was ich benutze

<main>
  <div class="clock">
    <div class="second hand"></div>
    <div class="minute hand"></div>
    <div class="hour hand"></div>
  </div>
</main>

Sehen wir uns an, was wir tun müssen, um unsere Uhr zu gestalten

.clock {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background-color: var(--grey);
  margin: 0 auto;
  position: relative;
}

Wir haben die Uhr 300 Pixel hoch und breit gemacht, die Hintergrundfarbe grau (mit einer benutzerdefinierten Eigenschaft, --grey, die wir später definieren können) und sie mit einem 50 % abgerundeten Rand zu einem Kreis gemacht.

Es gibt drei Zeiger auf der Uhr. Bringen wir diese zuerst mit absoluter Positionierung in die Mitte des Zifferblatts

.hand {
  position: absolute;
  left: 50%;
  top: 50%;
}

Beachten Sie den Namen dieser Klasse (.hands), da alle drei Zeiger sie für ihre Grundstile verwenden. Das ist wichtig, da alle Änderungen an dieser Klasse für alle drei Zeiger gelten.

Definieren wir die Abmessungen der Zeiger und färben wir sie ein

.hand {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 150px;
  background-color: var(--blue);
}

Die Zeiger sind nun alle an ihrem Platz

Korrekte Rotation erhalten

Feiern wir noch nicht ganz. Wir haben ein paar Probleme, und sie sind vielleicht nicht offensichtlich, wenn die Uhrzeiger so dünn sind. Was wäre, wenn wir sie 100 Pixel breit machen würden

Wir können jetzt sehen, dass, wenn ein Element zu 50 % von links positioniert ist, es in der Mitte des übergeordneten Elements ausgerichtet ist – aber das ist nicht genau das, was wir brauchen. Um dies zu beheben, muss die linke Koordinate 50 % minus die halbe Breite des Zeigers sein, was in unserem Fall 50 Pixel sind

Die Arbeit mit mehreren verschiedenen Messungen ist für die calc() Funktion ein Kinderspiel

.hand {
  position: absolute;
  left: calc(50% - 50px);
  top: 50%;
  width: 100px;
  height: 150px;
  background-color: var(--grey);
}

Dies behebt unsere anfängliche Positionierung, aber wenn wir versuchen, das Element zu drehen, sehen wir, dass der Transformationsursprung, der Drehpunkt der Rotation, in der Mitte des Elements liegt

Wir können die Eigenschaft transform-origin verwenden, um den Rotationsursprung auf die Mitte der x-Achse und oben auf der y-Achse zu ändern

.hand {
  position: absolute;
  left: calc(50% - 50px);
  top: 50%;
  width: 100px;
  height: 150px;
  background-color: var(--grey);
  transform-origin: center 0;
}

Das ist großartig, aber nicht perfekt, denn unsere Pixelwerte für die Uhrzeiger sind fest codiert. Was ist, wenn wir möchten, dass unsere Zeiger unterschiedliche Breiten und Höhen haben und sich an die tatsächliche Größe der Uhr anpassen? Ja, Sie haben es erraten: Wir brauchen ein paar CSS benutzerdefinierte Eigenschaften!

.second {
  --width: 5px;
  --height: 140px;
  --color: var(--yellow);
}
.minute {
  --width: 10px;
  --height: 90px;
  --color: var(--blue);
}
.hour {
  --width: 10px;
  --height: 50px;
  --color: var(--dark-blue);
}

Damit haben wir benutzerdefinierte Eigenschaften für die einzelnen Zeiger definiert. Interessant ist hier, dass wir diesen Eigenschaften die gleichen Namen gegeben haben: --width, --height und --color. Wie ist es möglich, dass wir ihnen unterschiedliche Werte gegeben haben, sie sich aber nicht gegenseitig überschreiben? Und welchen Wert erhalte ich zurück, wenn ich var(--width), var(--height) oder var(--color) aufrufe?

Schauen wir uns den Stundenzeiger an

<div class="hour hand"></div>

Wir haben der Klasse .hour neue benutzerdefinierte Eigenschaften zugewiesen, und sie sind lokal auf das Element beschränkt, was das Element und alle seine Kinder einschließt. Das bedeutet, dass jeder CSS-Stil, der auf das Element – oder seine Kinder angewendet wird, die benutzerdefinierten Eigenschaften abrufen – die spezifischen Werte sieht und verwendet, die innerhalb ihres eigenen Geltungsbereichs gesetzt wurden. Wenn Sie also var(--width) innerhalb des Stundenzeiger-Elements oder eines beliebigen darüber liegenden Elements aufrufen, ist der aus unserem obigen Beispiel zurückgegebene Wert 10px. Das bedeutet auch, dass, wenn wir versuchen, diese Eigenschaften außerhalb dieser Elemente zu verwenden – zum Beispiel innerhalb des Body-Elements –, sie für diese Elemente außerhalb des Geltungsbereichs nicht zugänglich sind.

Weiter zu den Zeigern für Sekunden und Minuten, wir betreten einen anderen Geltungsbereich. Das bedeutet, dass die benutzerdefinierten Eigenschaften mit unterschiedlichen Werten neu definiert werden können.

.second {
  --width: 5px;
  --height: 140px;
  --color: var(--yellow);
}
.minute {
  --width: 10px;
  --height: 90px;
  --color: var(--blue);
}
.hour {
  --width: 10px;
  --height: 50px;
  --color: var(--dark-blue);
}
.hand {
  position: absolute;
  top: 50%;
  left: calc(50% - var(--width) / 2);
  width: var(--width);
  height: var(--height);
  background-color: var(--color);
  transform-origin: center 0;
}

Das Tolle daran ist, dass die Klasse .hand (die wir allen drei Zeiger-Elementen zugewiesen haben) diese Eigenschaften für die Berechnungen und Deklarationen verwenden kann. Und jeder Zeiger erhält seine eigenen Eigenschaften aus seinem eigenen Geltungsbereich. Auf diese Weise personalisieren wir die Klasse .hand für jedes Element, um unnötige Wiederholungen in unserem Code zu vermeiden.

Unsere Uhr läuft und alle Zeiger bewegen sich mit der richtigen Geschwindigkeit

Wir könnten hier aufhören, aber lassen Sie mich ein paar Verbesserungen vorschlagen. Die Zeiger der Uhr beginnen um 6 Uhr, aber wir könnten ihre Anfangspositionen auf 12 Uhr setzen, indem wir die Uhr um 180 Grad drehen. Fügen wir diese Zeile der Klasse .clock hinzu

.clock {
  /* same as before */
  transform: rotate(180deg);
}

Die Zeiger sehen vielleicht schön mit abgerundeten Kanten aus

.hand {
  /* same as before */
  border-radius: calc(var(--width) / 2);
}

Unsere Uhr sieht gut aus und funktioniert super! Und alle Zeiger beginnen bei 12 Uhr, genau wie wir es wollen!

Die Uhr einstellen

Trotz all dieser großartigen Funktionen ist die Uhr unbrauchbar, da sie **die tatsächliche Zeit nicht korrekt anzeigt**. Es gibt jedoch einige harte Einschränkungen für das, was wir dagegen tun können. Es ist einfach nicht möglich, mit HTML und CSS auf die lokale Zeit zuzugreifen, um unsere Uhr automatisch einzustellen. Aber wir können sie für die manuelle Einrichtung vorbereiten.

Wir können die Uhr so einstellen, dass sie zu einer bestimmten Stunde und Minute beginnt, und wenn wir das HTML genau zu dieser Zeit ausführen, behält sie danach die Zeit genau bei. So stellt man im Grunde eine echte Uhr ein, daher halte ich das für eine akzeptable Lösung. 😅

Fügen wir die Zeit, zu der die Uhr beginnen soll, als benutzerdefinierte Eigenschaften innerhalb der Klasse .clock hinzu

.clock {
  --setTimeHour: 16;
  --setTimeMinute: 20;
  /* same as before */
}

Die aktuelle Zeit für mich, während ich schreibe, nähert sich 16:20 Uhr, also wird die Uhr auf diese Zeit eingestellt. Alles, was ich tun muss, ist die Seite um 16:20 Uhr zu aktualisieren, und sie wird die Zeit genau beibehalten.

Okay, aber... *wie können wir die Zeit auf diese Positionen einstellen und die Zeiger drehen, wenn eine CSS-Animation bereits die Rotation steuert?*

Idealerweise möchten wir die Zeiger der Uhr auf eine bestimmte Position drehen und einstellen, wenn die Animation ganz am Anfang beginnt. Sagen wir, Sie möchten den Stundenzeiger auf 90 Grad einstellen, damit er um 15:00 Uhr beginnt, und die Rotationsanimation von dieser Position aus initialisieren

/* this will not work */
.hour.hand {
  transform: rotate(90deg);
  animation: rotate linear var(--hour) infinite;
}

Nun, leider wird das nicht funktionieren, da der transform sofort von der Animation überschrieben wird, da sie genau dieselbe transform-Eigenschaft modifiziert. Egal, was wir hier einstellen, er wird auf 0 Grad zurückkehren, wo der erste Keyframe der Animation beginnt.

Wir können die Rotation des Zeigers unabhängig von der Animation einstellen. Zum Beispiel könnten wir den Zeiger in ein zusätzliches Element einwickeln. Dieses zusätzliche Eltern-Element, der „Setter“, wäre für die Einstellung der Anfangsposition verantwortlich, dann könnte das Zeiger-Element darin unabhängig von 0 bis 360 Grad animiert werden. Die anfängliche 0-Grad-Position wäre dann relativ zu dem, was wir das übergeordnete Setter-Element gesetzt haben.

Das würde funktionieren, aber zum Glück gibt es eine bessere Option! **Lassen Sie mich Sie verblüffen!** 🪄✨✨

Die Eigenschaft animation-delay ist das, was wir normalerweise verwenden, um die Animation mit einer vordefinierten Verzögerung zu starten.

Der Trick ist, **einen negativen Wert zu verwenden**, der die Animation sofort startet, aber von einem bestimmten Punkt in der Animationszeitleiste aus!

Um 10 Sekunden in der Animation zu starten

animation-delay: -10s;

Bei den Stunden- und Minutenzeigern wird der tatsächliche Wert für die Verzögerung aus den Eigenschaften --setTimeHour und --setTimeMinute berechnet. Um die Berechnung zu erleichtern, erstellen wir zwei neue Eigenschaften mit der benötigten Zeitverschiebung

• Der Stundenzeiger muss die gewünschte Stunde sein, multipliziert mit einer Stunde.
• Der Minutenzeiger verschiebt die gewünschte Minute multipliziert mit einer Minute.

--setTimeHour: 16;
--setTimeMinute: 20;
--timeShiftHour: calc(var(--setTimeHour) * var(--hour));
--timeShiftMinute: calc(var(--setTimeMinute) * var(--minute));

Diese neuen Eigenschaften enthalten die exakte Zeit, die wir für die Eigenschaft animation-delay benötigen, um unsere Uhr einzustellen. Fügen wir diese zu unseren Animationsdefinitionen hinzu

.second.hand {
  animation: rotate steps(60) var(--minute) infinite;
}
.minute.hand {
  animation: rotate linear var(--hour) infinite;
  animation-delay: calc(var(--timeShiftMinute) * -1);
}
.hour.hand {
  animation: rotate linear calc(var(--hour) * 12) infinite;
  animation-delay: calc(var(--timeShiftHour) * -1);
}

Beachten Sie, wie wir diese Werte mit -1 multipliziert haben, um sie in eine negative Zahl umzuwandeln.

Wir sind damit fast perfekt, aber es gibt ein kleines Problem: Wenn wir zum Beispiel die Anzahl der Minuten auf 30 einstellen, muss der Stundenzeiger bereits auf halbem Weg zur nächsten Stunde sein. Eine noch schlimmere Situation wäre es, die Minuten auf 59 einzustellen und der Stundenzeiger ist immer noch am Anfang der Stunde.

Um dies zu beheben, müssen wir nur die Minutenverschiebung und die Stundenverschiebungswerte für den Stundenzeiger addieren

.hour.hand {
  animation: rotate linear calc(var(--hour) * 12) infinite;
  animation-delay: calc(
    (var(--timeShiftHour) + var(--timeShiftMinute)) * -1
  );
}

Und ich glaube, damit haben wir alles behoben. Bewundern wir unsere schöne, reine CSS, einstellbare, analoge Uhr

Legen wir los mit Digital

Grundsätzlich verwenden eine analoge und eine digitale Uhr die gleichen Berechnungen, der Unterschied liegt in der visuellen Darstellung der Berechnungen.

Hier ist meine Idee: Wir können eine digitale Uhr erstellen, indem wir hohe, vertikale Zahlenkolonnen einrichten und diese anstelle von rotierenden Uhrzeigern animieren. Wenn wir die Überlaufmaske der endgültigen Version des Uhrcontainers entfernen, wird der Trick sichtbar

Das neue HTML-Markup muss alle Zahlen für alle drei Abschnitte der Uhr enthalten, von 00 bis 59 für die Sekunden- und Minutenabschnitte und von 00 bis 23 für den Stundenabschnitt

<main>
  <div class="clock">
    <div class="hour section">
      <ul>
        <li>00</li>
        <li>01</li>
        <!-- etc. -->
        <li>22</li>
        <li>23</li>
      </ul>
    </div>
    <div class="minute section">
      <ul>
        <li>00</li>
        <li>01</li>
        <!-- etc. -->
        <li>58</li>
        <li>59</li>
      </ul>
    </div>
    <div class="second section">
      <ul>
        <li>00</li>
        <li>01</li>
        <!-- etc. -->
        <li>58</li>
        <li>59</li>
      </ul>
    </div>
  </div>
 </main>

Damit diese Zahlen ausgerichtet sind, müssen wir etwas CSS schreiben, aber um mit dem Styling zu beginnen, können wir die benutzerdefinierten Eigenschaften aus dem :root-Scope der analogen Uhr sofort kopieren, da Zeit universell ist

:root {
  --second: 1s;
  --minute: calc(var(--second) * 60);
  --hour: calc(var(--minute) * 60);
}

Das äußerste Wrapper-Element, die .clock, hat immer noch genau dieselben benutzerdefinierten Eigenschaften zum Einstellen der Anfangszeit. Alles, was sich geändert hat, ist, dass es zu einem Flexbox-Container wird

.clock {
  --setTimeHour: 14;
  --setTimeMinute: 01;
  --timeShiftHour: calc(var(--setTimeHour) * var(--hour));
  --timeShiftMinute: calc(var(--setTimeMinute) * var(--minute));

  width: 150px;
  height: 50px;
  background-color: var(--grey);
  margin: 0 auto;
  position: relative;
  display: flex;
}

Die drei ungeordneten Listen und die darin enthaltenen Listenelemente mit den Zahlen benötigen keine besondere Behandlung. Die Zahlen stapeln sich übereinander, wenn ihr horizontaler Platz begrenzt ist. Stellen wir einfach sicher, dass es keine Listenformatierung gibt, die Aufzählungszeichen verhindert, und dass wir die Dinge zur konsistenten Platzierung zentrieren

.section > ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.section > ul > li {
  width: 50px;
  height: 50px;
  font-size: 32px;
  text-align: center;
  padding-top: 2px;
}

Das Layout ist fertig!

Außerhalb jeder ungeordneten Liste befindet sich ein <div> mit der Klasse .section. Dies ist das Element, das jeden Abschnitt umschließt, sodass wir es als Maske verwenden können, um die Zahlen auszublenden, die außerhalb des sichtbaren Bereichs der Uhr liegen

.section {
  position: relative;
  width: calc(100% / 3);
  overflow: hidden;
}

Die Struktur der Uhr ist fertig und die Schienen sind nun bereit, animiert zu werden.

Die digitale Uhr animieren

Die Grundidee hinter der gesamten Animation ist, dass die drei Zahlenstreifen innerhalb ihrer Masken nach oben und unten bewegt werden können, um verschiedene Zahlen von 0 bis 59 für Sekunden und Minuten und von 0 bis 23 für Stunden (im 24-Stunden-Format) anzuzeigen.

Dies können wir erreichen, indem wir die translateY-Übergangsfunktion in CSS für die einzelnen Zahlenstreifen von 0 auf -100 % ändern. Das liegt daran, dass 100 % auf der y-Achse der Höhe des gesamten Streifens entsprechen. Ein Wert von 0 % zeigt die erste Zahl an, und 100 % zeigt die letzte Zahl des aktuellen Streifens an.

Zuvor basierte unsere Animation auf der Drehung eines Zeigers von 0 bis 360 Grad. Wir haben jetzt eine andere Animation, die die Zahlenstreifen von 0 auf -100 % auf der y-Achse bewegt

@keyframes tick {
  from { transform: translateY(0); }
  to { transform: translateY(-100%); }
}

Diese Animation auf den Sekunden-Zahlenstreifen anzuwenden, kann auf die gleiche Weise erfolgen wie bei der analogen Uhr. Der einzige Unterschied sind der Selektor und der Name der referenzierten Animation

.second > ul {
  animation: tick steps(60) var(--minute) infinite;
}

Mit der Einstellung step(60) tickt die Animation zwischen den Zahlen, wie wir es für den Sekundenzeiger der analogen Uhr getan haben. Wir könnten dies in ease ändern, und dann würden die Zahlen sanft nach oben und unten gleiten, als wären sie auf einem Papierband.

Die Zuweisung der neuen Ticken-Animation zu den Minuten- und Stundenabschnitten ist genauso unkompliziert

.minute > ul {
  animation: tick steps(60) var(--hour) infinite;
  animation-delay: calc(var(--timeShiftMinute) * -1);
}
.hour > ul {
  animation: tick steps(24) calc(24 * var(--hour)) infinite;
  animation-delay: calc(var(--timeShiftHour) * -1);
}

Auch hier sind die Deklarationen sehr ähnlich, was sich dieses Mal unterscheidet, ist der Selektor, die Timing-Funktion und der Animationsname.

Die Uhr tickt jetzt und hält die richtige Zeit

Ein weiteres Detail: Der blinkende Doppelpunkt (:)

Auch hier könnten wir aufhören und es dabei belassen. Aber es gibt noch eine letzte Sache, die wir tun können, um unsere digitale Uhr etwas realistischer zu machen: den Doppelpunkt-Separator zwischen Minuten und Sekunden bei jedem vergangenen Sekundentakt blinken zu lassen.

Wir könnten diese Doppelpunkte im HTML hinzufügen, aber sie sind kein Teil des Inhalts. Wir wollen, dass sie eine Verbesserung des Aussehens und Stils der Uhr sind, also ist CSS der richtige Ort, um diesen Inhalt zu speichern. Dafür ist die content-Eigenschaft da, und wir können sie auf den ::after Pseudoelementen für die Minuten und Stunden verwenden

.minute::after,
.hour::after {
  content: ":";
  margin-left: 2px;
  position: absolute;
  top: 6px;
  left: 44px;
  font-size: 24px;
}

Das war einfach! Aber wie lassen wir den Sekunden-Doppelpunkt auch blinken? Wir wollen ihn animieren, also müssen wir eine neue Animation definieren? Es gibt viele Möglichkeiten, dies zu erreichen, aber ich dachte, wir sollten dieses Mal die content-Eigenschaft ändern, um zu demonstrieren, dass es, ganz unerwartet, möglich ist, ihren Wert während einer Animation zu ändern

@keyframes blink {
  from { content: ":"; }
  to { content: ""; }
}

Das Animieren der content-Eigenschaft funktioniert nicht in allen Browsern, daher könnten Sie dies als sichere Option einfach in opacity oder visibility ändern...

Der letzte Schritt ist die Zuweisung der Blink-Animation zum Pseudoelement des Minutenabschnitts

.minute::after {
  animation: blink var(--second) infinite;
}

Und damit sind wir fertig! Die digitale Uhr hält die Zeit genau, und wir haben es sogar geschafft, einen blinkenden Separator zwischen den Zahlen hinzuzufügen.

Buch: Alles, was Sie brauchen, sind HTML und CSS

Dies ist nur ein Beispielprojekt aus meinem neuen Buch, Alles, was Sie brauchen, sind HTML und CSS. Es ist bei Amazon sowohl in den USA als auch im Vereinigten Königreich erhältlich.

Wenn Sie gerade erst mit der Webentwicklung beginnen, werden Ihnen die Ideen im Buch helfen, Ihre Fähigkeiten zu verbessern und interaktive, animierte Weboberflächen zu erstellen, ohne JavaScript zu berühren.

Wenn Sie ein erfahrener JavaScript-Entwickler sind, ist das Buch eine gute Erinnerung daran, dass viele Dinge allein mit HTML und CSS erstellt werden können, insbesondere jetzt, da wir über viel leistungsfähigere CSS-Tools und -Funktionen verfügen, wie die, die wir in diesem Artikel behandelt haben. Es gibt viele Beispiele im Buch, die die Grenzen ausloten, darunter interaktive Karussells, Akkordeons, Berechnungen, Zählungen, erweiterte Eingabevalidierung, Zustandsverwaltung, schließbare Modal-Fenster und Reaktionen auf Maus- und Tastatureingaben. Es gibt sogar ein voll funktionsfähiges Sterne-Bewertungs-Widget und einen Warenkorb.

Vielen Dank, dass Sie sich die Zeit genommen haben, mit mir Uhren zu bauen!