Erstellen einer Uhr mit den neuen CSS SIN () und COS () Trigonometriefunktionen

Neue Merkmale von CSS: sin () und cos () trigonometrische Funktionen erzeugen Takteffekte

Die neuesten Versionen von Firefox und Safari haben CSS -trigonometrische Funktionen unterstützt! Dies bringt leistungsstarke mathematische Computerfunktionen in CSS und erweitert unendliche Möglichkeiten. Dieses Tutorial konzentriert sich auf die Funktion SIN () und COS () und erstellt eine Uhr. Während andere trigonometrische Funktionen wie Tan () in Kürze kommen, sind SIN () und COS () gut geeignet, um Text entlang des Umfangs zu ordnen, der von Chris mit Sass Mixin auf CSS-Tricks vor sechs Jahren implementiert wurde.

Zieleffekt (derzeit nur von Firefox und Safari unterstützt):

Wir ordnen Textzeichen entlang des Umfangs an, um ein Uhrengesicht zu bilden. Die anfängliche HTML -Struktur lautet wie folgt:

<div class="clock">
  <div class="clock-face">
    <time datetime="12:00">12</time><time datetime="1:00">1</time><time datetime="2:00">2</time><time datetime="3:00">3</time><time datetime="4:00">4</time><time datetime="5:00">5</time><time datetime="6:00">6</time><time datetime="7:00">7</time><time datetime="8:00">8</time><time datetime="9:00">9</time><time datetime="10:00">10</time><time datetime="11:00">11</time>
  </div>
</div>

Nächst .clock <time></time> Dies soll nur grundlegende Formen und Hintergrundfarben erstellen, um die Beobachtung von Effekten zu erleichtern. Beachten Sie, dass wir den Breitenwert in der CSS -Variablen speichern und später verwendet werden. datetime

Fügen Sie nun eine Variable

.clock {
  --_ow: clamp(5rem, 60vw, 40rem);
  --_w: 88cqi;
  aspect-ratio: 1;
  background-color: tomato;
  border-radius: 50%;
  container-type: inline;
  display: grid;
  height: var(--_ow);
  place-content: center;
  position: relative;
  width: var(--_ow);
}

hinzu, um den Radius des Kreises zu speichern, der gleich halb so breit ist

mathematische Berechnung: Der Umfang beträgt 360 Grad, die Uhr hat 12 Zahlen, jede Ziffer ist 30 Grad (360/12). Mathematisch beginnt der Kreis um 3 Uhr, also ist 12 Uhr tatsächlich -90 Grad, was 270 Grad (360 - 90) beträgt.

--_r variable add calc() Legen Sie den Gradwert jeder Zahl ein und Inkrementierung in 30 Grad:

.clock {
  --_w: 300px;
  --_r: calc(var(--_w) / 2);
  /* rest of styles */
}

Verwenden Sie nun die Funktions sin () und cos (), um die X- und Y -Koordinaten jeder Zahl zu berechnen:

x Koordinatenformel: Radius (Radius * cos (Grad)) --_d

.clock time:nth-child(1) { --_d: 270deg; }
.clock time:nth-child(2) { --_d: 300deg; }
.clock time:nth-child(3) { --_d: 330deg; }
/* ... rest of the numbers ... */

y Koordinatenformel: Radius (Radius * sin (Grad))

Fügen Sie den Zahlen grundlegende Stile hinzu, damit sie absolut positioniert sind und die berechneten Koordinaten verwenden:

--_x: calc(var(--_r) + (var(--_r) * cos(var(--_d))));

Um genauer zu positionieren, muss bei der Berechnung des Radius die Größe der Zahl abgezogen werden:

--_y: calc(var(--_r) + (var(--_r) * sin(var(--_d))));

Ändern Sie die Farbe, um sie schöner zu machen.

.clock-face time {
  --_x: calc(var(--_r) + (var(--_r) * cos(var(--_d))));
  --_y: calc(var(--_r) + (var(--_r) * sin(var(--_d))));
  --_sz: 12cqi;
  display: grid;
  height: var(--_sz);
  left: var(--_x);
  place-content: center;
  position: absolute;
  top: var(--_y);
  width: var(--_sz);
}

Nächst

HTML -Struktur hinzufügen:

--_r: calc((var(--_w) - var(--_sz)) / 2);

Stil hinzufügen:

Verwenden Sie schließlich JavaScript, um die aktuelle Zeit festzulegen:

<div class="arm hours"></div>
<div class="arm minutes"></div>
<div class="arm seconds"></div>

Browserkompatibilitätsverarbeitung hinzufügen:

.arm {
  /* ... styles ... */
}

.seconds { /* ... styles ... */ }
.minutes { /* ... styles ... */ }
.hours { /* ... styles ... */ }

@keyframes turn { /* ... animation ... */ }

endgültiger Effekt: Eine vollständige CSS -Uhr! Derzeit werden nur Firefox- und Safari -Browser unterstützt.

Zusätzlich kann die Uhr in eine zirkuläre Bildbibliothek oder andere kreative Muster umgewandelt werden.

// ... JavaScript code to set initial time ...

Das obige ist der detaillierte Inhalt vonErstellen einer Uhr mit den neuen CSS SIN () und COS () Trigonometriefunktionen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!