Beispielcode zum Implementieren schöner Uhranimationseffekte mit CSS

transformieren: drehen(calc(30deg * var(--i)));
        Transform-Ursprung: 0 250px;
        Animation: 5 s rotieren, linear, unendlich;
        Animationsverzögerung: calc(0,42 s * var(--i));

<div Klasse="Box">
            <div Klasse="Farbe" Stil="--i:1">1</div>
            <div Klasse="Farbe" Stil="--i:2">2</div>
            <div Klasse="Farbe" Stil="--i:3">3</div>
            <div Klasse="Farbe" Stil="--i:4">4</div>
            <div Klasse="Farbe" Stil="--i:5">5</div>
            <div Klasse="Farbe" Stil="--i:6">6</div>
            <div Klasse="Farbe" Stil="--i:7">7</div>
            <div Klasse="Farbe" Stil="--i:8">8</div>
            <div Klasse="Farbe" Stil="--i:9">9</div>
            <div Klasse = "Farbe" Stil = "--i:10">10</div>
            <div Klasse="Farbe" Stil="--i:11">11</div>
            <div Klasse="Farbe" Stil="--i:12">12</div>
            <div class="Stunden"></div>
            <div class="Minuten"></div>
        </div>

* {
  Rand: 0px;
  Polsterung: 0px;
  Box-Größe: Rahmenbox;
}

Körper {
  Hintergrund: -webkit-linear-gradient (links oben, rosa, rgb(90, 83, 83));
  Anzeige: Flex;
  Mindesthöhe: 100vh;
  Inhalt ausrichten: zentriert;
  Elemente ausrichten: zentrieren;

  Abschnitt {
    Höhe: 500px;
    Breite: 500px;
    .Kasten {
      Position: relativ;
      Höhe: 500px;
      Breite: 500px;
      Anzeige: Flex;
      Inhalt ausrichten: zentriert;
      Elemente ausrichten: zentrieren;
      Rand: 5px durchgezogen #e2adb6;
      Randradius: 50 %;
      // Rand: 2px durchgehend rot;
      &:hover .farbe {
        Animations-Wiedergabestatus: angehalten;
      }

      &::nach {
        Inhalt: "";
        Anzeige: Block;
        Höhe: 25px;
        Breite: 25px;
        Hintergrundfarbe: #000;
        Z-Index: 4;
        Randradius: 50 %;
      }

      @keyframes drehen {
        0%,
        50 % {
          Textschatten: keiner;
          Farbe: #000;
          transformieren: drehen(calc(30deg * var(--i))) skalieren(1);
        }

        50,1 %,
        100 % {
          Textschatten: 0 0 10px #000,
            0 0 15px #000;
          Farbe: #fff;
          transformieren: drehen(berechnen(30 Grad * var(--i))) skalieren(1,01);
        }
      }

      .Farbe {
        Position: absolut;
        oben: 0;
        Farbe: #f2f2f2;
        Deckkraft: .6;
        Schriftgröße: 20px;
        transformieren: drehen(calc(30deg * var(--i)));
        Transform-Ursprung: 0 250px;
        Zeilenhöhe: 50px;
        Animation: 5 s rotieren, linear, unendlich;
        Animationsverzögerung: calc(0,42 s * var(--i));
      }

      @keyframes ändern1 {
        0% {
          transformieren: verschiebeY(-50%) drehen(0 Grad);
          Transform-Ursprung: 0 100px;
        }

        100 % {
          transformieren: verschiebeY(-50%) drehen(360 Grad);
          Transform-Ursprung: 0 100px;
        }
      }

      @keyframes ändern2 {
        0% {
          transformieren: verschiebeY(-50 %) drehen(-30 Grad) drehen(0 Grad);
          Transform-Ursprung: 0 150px;
        }

        100 % {
          transformieren: verschiebeY(-50 %) drehen(-30 Grad) drehen(360 Grad);
          Transform-Ursprung: 0 150px;
        }
      }

      .Std {
        Position: absolut;
        oben: 40%;
        Breite: 5px;
        transformieren: verschiebeY(-50%);
        Höhe: 100px;
        Hintergrundfarbe: #f2f2f2;
        Animation: Änderung1 24 s linear unendlich;

        &::nach {
          Inhalt: "";
          Position: absolut;
          oben: 0;
          links: -10px;
          Breite: 20px;
          Höhe: 20px;
          Rahmen unten: 5px durchgezogen #f2f2f2;
          Rahmen rechts: 5px durchgezogen #f2f2f2;
          transformieren: drehen (-135 Grad);
        }
      }

      .Minuten {
        Position: absolut;
        oben: 36 %;
        Breite: 3px;
        Höhe: 150px;
        Hintergrundfarbe: #000;
        transformieren: verschiebeY(-50%) drehen(-30 Grad);
        Transform-Ursprung: 0 150px;
        Animation: Änderung2 2s linear unendlich;

        &::nach {
          Inhalt: "";
          Position: absolut;
          oben: 0;
          links: -10px;
          // Anzeige: Block;
          Breite: 20px;
          Höhe: 20px;
          Rahmen unten: 3px durchgezogen #000;
          Rahmen rechts: 3px durchgezogen #000;
          transformieren: drehen (-135 Grad);
        }
      }
    }
  }
}