Eine einfache Implementierungsmethode für eine digitale LED-Uhr in CSS3

Das dürfte etwas sein, was viele Leute gemacht haben. Ich hatte einfach Lust und wollte darüber schreiben, also habe ich etwas Zeit damit verbracht, daran herumzubasteln und die Dunkelmodus-Verarbeitung hinzugefügt.

Zunächst einmal ist völlig klar, dass hierfür wirklich keine technischen Fähigkeiten erforderlich sind, sondern lediglich ein wenig Geduld.

Die LED-Nummern bestehen aus zwei Zeilen links und zwei Zeilen rechts sowie drei Zeilen in der Mitte, also insgesamt 7 Zeilen. Um die Identifizierung zu erleichtern, habe ich es beim Schreiben der Demo so geschrieben.

<div Klasse="digital digital_0">
  <span class="c1"></span>
  <span class="c2"></span>
  <span class="c3"></span>
  <span class="l1"></span>
  <span class="l2"></span>
  <span class="r1"></span>
  <span class="r2"></span>
</div>

Die Funktion von digital_0 ist eigentlich ganz einfach. Sie dient dazu, die Änderungen der zehn Zahlen von 0 bis 9 zu steuern.

.digital_1 .c1,
.digital_1 .c2,
.digital_1 .c3,
.digital_1 .l1,
.digital_1 .l2,
.digital_2 .l1,
.digital_2 .r2,
.digital_3 .l1,
.digital_3 .l2,
.digital_4 .c1,
.digital_4 .c3,
.digital_4 .l2,
.digital_5 .l2,
.digital_5 .r1,
.digital_6 .r1,
.digital_7 .c2,
.digital_7 .c3,
.digital_7 .l1,
.digital_7 .l2,
.digital_9 .l2,
.digital_0 .c2 {
  Animation: changeDigital 200 ms 0 ms 1 Vorwärts-Einstieg;
}

Hier wird eine Animation mit einer Dauer von 200 ms verwendet, hauptsächlich um einen Übergangseffekt zu erzeugen, wenn bestimmte Teile verschwinden.

@keyframes changeDigital {
  bilden {
    Deckkraft: 1;
  }
  Zu {
    Deckkraft: 0;
  }
}

Was bleibt, ist der Teil, der am meisten Geduld erfordert: das Anpassen und Kontrollieren der Positionen der sieben Linien, wobei auch zu berücksichtigen ist, dass jede Linie einen Winkel und eine leicht abgerundete Haptik aufweist. Wenn Sie ein abgerundetes Gefühl wünschen, verwenden Sie einfach border-radius. Was die Abschrägung betrifft: Wenn Sie wissen, wie man in CSS ein Dreieck mit einem Rand zeichnet, sollten Sie wissen, wie man diese Abschrägung erstellt.

Wenn wir ein Dreieck zeichnen möchten, sind Breite und Höhe beide 0, und dann verwenden wir die Rahmenbreite, um die Größe des endgültigen Dreiecks zu steuern. Wenn wir je nach Position der Linie bestimmte Werte für Breite und Höhe wählen, hat dies dann einen Abschrägungseffekt?

Als nächstes müssen wir auf die horizontale Linie in der Mitte achten, die das .c2-Element ist. Auf beiden Seiten der Linie stehen Dreiecke hervor. Es gibt viele Möglichkeiten, dies zu erreichen. Hier entscheide ich mich für die überlagerte Verwendung von :after und :before.

Der letzte Schritt besteht darin, die Position jedes Elements anzupassen und Größe und Position zu steuern. Da dies über die Positionierung erfolgt, ist die Anpassung sehr einfach.

.digitale Spanne {
  Position: absolut;
  Randradius: 50vh;
  Box-Größe: Rahmenbox;
}
.digital .c1,
.digital .c2,
.digital .c3 {
  Höhe: 0;
  Breite: 26px;
  Rahmen links: 4px durchgehend transparent;
  Rahmen rechts: 4px durchgehend transparent;
}
.digital .c1 {
  oben: 0;
  links: 0;
  Rahmen oben: 4px durchgehende aktuelle Farbe;
}
.digital .c2 {
  oben: 50 %;
  links: 0;
  Rand oben: -2px;
}
.digital .c2:vorher,
.digital .c2:nach {
  Inhalt: "";
  Höhe: 0;
  Breite: 24px;
  Rahmen links: 2px durchgehend transparent;
  Rahmen rechts: 2px durchgehend transparent;
  Box-Größe: Rahmenbox;
}
.digital .c2:vor {
  Position: absolut;
  oben: 0;
  links: -3px;
  Rahmen unten: 2px durchgehende aktuelle Farbe;
}
.digital .c2:nach {
  Position: absolut;
  oben: 2px;
  links: -3px;
  Rahmen oben: 2px durchgehende aktuelle Farbe;
}
.digital .c3 {
  unten: 0;
  links: 0;
  Rahmen unten: 4px durchgehende aktuelle Farbe;
}
.digital .l1,
.digital .l2 {
  Höhe: 21px;
  Breite: 0;
  links: 0;
  Rahmen oben: 2px durchgehend transparent;
  Rahmen unten: 2px durchgehend transparent;
  Rahmen links: 4px durchgehende aktuelle Farbe;
}
.digital .l1 {
  oben: 1px;
  Obere Rahmenbreite: 4px;
}
.digital .l2 {
  oben: 24px;
  Breite des unteren Rahmens: 4px;
}
.digital .r1,
.digital .r2 {
  Höhe: 21px;
  Breite: 0;
  rechts: 0;
  Rahmen oben: 2px durchgehend transparent;
  Rahmen unten: 2px durchgehend transparent;
  Rahmen rechts: 4px durchgehende aktuelle Farbe;
}
.digital .r1 {
  oben: 1px;
  Obere Rahmenbreite: 4px;
}
.digital .r2 {
  oben: 24px;
  Breite des unteren Rahmens: 4px;
}

Wenn das erledigt ist, muss die äußere Schicht nur noch ein wenig optimiert, beispielsweise leicht geneigt werden.

.digital {
  Position: relativ;
  Breite: 26px;
  Höhe: 46px;
  Rand links: 10px;
  transformieren: schräg (-6 Grad);
}

Oh, ich habe vergessen zu erwähnen, dass ich hier currentColor als Rahmenfarbe verwendet habe, sodass ich beim Wechsel in den Dunkelmodus nur die Textfarbe und die Hintergrundfarbe im Textkörper ändern muss. currentColor wählt die zu verwendende Textfarbe aus.

Nachdem die Stile verarbeitet wurden, besteht der nächste Schritt darin, etwas JS hinzuzufügen, um die Uhr anzuzeigen. Dazu gibt es nicht viel zu sagen. Setzen Sie die beiden Zahlen einfach in verschiedene Divs. Wenn ich hier die Einerstelle nehme, verwende ich m%10, um den Rest zu erhalten; wenn ich die Zehnerstelle nehme, verwende ich parseInt(m/10), um sie zu runden. Nachdem Sie sie herausgenommen haben, fügen Sie sie einfach in die entsprechenden Divs ein.

Demo-Adresse: http://lab.tianyizone.com/demo/digital_number.html

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.