CSS3 verwendet var()- und calc()-Funktionen, um Animationseffekte zu erzielen

Bildbeschreibung hier einfügen

Wissenspunkte in der Vorschau anzeigen.

Animationsrahmen
Hintergrundverlauf
Verwendung von var() und calc()
Flex-Layout-Szenario

Start:

Erstellen Sie die HTML-Struktur:

<Abschnitt>
    <div Klasse="wird geladen">
      <div Klasse="text"></div>
      <div Klasse="Uhr" Stil="--i:1;"></div>
      <div Klasse="Uhr" Stil="--i:2;"></div>
      <div Klasse="Uhr" Stil="--i:3;"></div>
      <div Klasse="Uhr" Stil="--i:4;"></div>
      <div Klasse="Uhr" Stil="--i:5;"></div>
      <div Klasse="Uhr" Stil="--i:6;"></div>
      <div Klasse="Uhr" Stil="--i:7;"></div>
      <div Klasse="Uhr" Stil="--i:8;"></div>
      <div Klasse="Uhr" Stil="--i:9;"></div>
      <div Klasse="Uhr" Stil="--i:10;"></div>
      <div Klasse="Uhr" Stil="--i:11;"></div>
      <div Klasse="Uhr" Stil="--i:12;"></div>
      <div Klasse="Uhr" Stil="--i:13;"></div>
      <div Klasse="Uhr" Stil="--i:14;"></div>
      <div Klasse="Uhr" Stil="--i:15;"></div>
      <div Klasse="Uhr" Stil="--i:16;"></div>
      <div Klasse="Uhr" Stil="--i:17;"></div>
      <div Klasse="Uhr" Stil="--i:18;"></div>
      <div Klasse="Uhr" Stil="--i:19;"></div>
      <div Klasse="Uhr" Stil="--i:20;"></div>
    </div>
  </Abschnitt>

Da wir uns im Kreis drehen möchten, benötigen wir 20 kleine Kästchen, um unser Kreiskästchen zu bilden, und fügen den Stil --i :num hinzu, damit wir den Wert dahinter erhalten.

Zentrieren Sie die Box:

*{
      Rand: 0;
      Polsterung: 0;
      Box-Größe: Rahmenbox;
    }
  Abschnitt{
    Anzeige: Flex;
    Inhalt ausrichten: zentriert;
    Elemente ausrichten: zentrieren;
    Mindesthöhe: 100vh;
    Hintergrund: -webkit-linear-gradient (links oben, rosa, orange);
  }

Verwenden Sie das Flex-Layout, um die Box in der Mitte zu positionieren.
Hintergrund: -webkit-linear-gradient (links oben, rosa, orange);
Dies ist ein Hintergrund mit Farbverlauf.

Stellen Sie die Größe der Ladebox ein.

.Laden{
    Position: relativ;
    Breite: 250px;
    Höhe: 250px;
  }

Positionieren Sie den Text und das Kreisfeld innerhalb des Ladefelds.

.wird geladen .text::nach{
    Inhalt: „Wird geladen“;
    Position: absolut;
    oben: 50 %;
    links: 50%;
    transformieren: übersetzen(-50 %, -50 %);
    Farbe: #000;
    Schriftgröße: 24px;
    Schriftstärke: 600;
    Höhe: 66px;
    Breite: 130px;
    Textausrichtung: zentriert;
    Zeilenhöhe: 66px;
    Übergang: alle 0,5 s;
    Buchstabenabstand: 2px;
  }
.Uhr wird geladen{
    Position: absolut;
    links: 50%;
    Höhe: 25px;
    Breite: 8px;
    Hintergrundfarbe: rot;
    transformieren: drehen(calc(18deg * var(--i)));
    Transform-Ursprung: 0 125px;
    Animation: Uhr 1,2 s linear unendlich;
    Animationsverzögerung: calc(0,06 s * var(--i));
  }

Über var (–i) können wir den Num-Wert von i im Tag-Stil erhalten.
Die Gradberechnung lautet 360 / 20 = 18 Grad. Da wir 20 Kreiskästen haben, dreht sich jeder um 18 Grad und die nachfolgenden Drehungen werden überlagert, um diesen Effekt zu erzielen. Wenn die Rotationsposition jedoch nicht geändert wird, rotiert es direkt um die Mitte des Kreiskastens und zerstreut sich nicht, sondern bildet direkt einen Kreis.

Bildbeschreibung hier einfügen

Auf diese Weise wird die Rotationspositionierung der Kreisbox erreicht.

Animation definieren, Animation hinzufügen

@keyframes Uhr {
    0 %, 50 %{
      Hintergrundfarbe: rosa;
      Kastenschatten: keiner;
    }
    50,1 %, 100 %{
      Hintergrundfarbe: rot;
      Box-Schatten: 0 0 5px rot,
                  0 0 10px rot,
                  0 0 25px rot,
                  0 0 40px rot;
    }
  }

Transform-Ursprung: 0 125px;
    Animation: Uhr 1,2 s linear unendlich;
    Animationsverzögerung: calc(0,06 s * var(--i));

Für Kastenschatten können Sie mehrere Werte festlegen, wodurch sie blendender wirken.

Fügen Sie ein Hover-Ereignis hinzu, um die Animation zu stoppen

wird geladen .text:hover::after{
    Inhalt: „Beendet“;
    transformieren: übersetzen(-50 %, -50 %) übersetzenY(-8px) skalieren(1,3);
    Farbe: rot;
  }
  .wird geladen:hover .clock{
    Animations-Wiedergabestatus: angehalten;
  }

Dies ist das Ende dieses Artikels über die Verwendung der var()- und calc()-Funktionen von CSS3 zum Erzielen von Animationseffekten. Weitere relevante Inhalte zu CSS-Animationseffekten finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

<<: Front-End-KI-Schnitttipps (Erfahrung)

>>: Analyse und Lösung der Gründe, warum geplante MySQL-Aufgaben nicht normal ausgeführt werden können