Ein Beispiel für die Verwendung von CSS3-Animation, um den Effekt eines Kreises zu erzielen, der sich von klein nach groß ausdehnt und nach außen ausbreitet

Ein Beispiel für die Verwendung von CSS3-Animation, um den Effekt eines Kreises zu erzielen, der sich von klein nach groß ausdehnt und nach außen ausbreitet

Vorwort

In diesem Artikel wird hauptsächlich ein Beispiel für die Verwendung von CSS3-Animation gezeigt, um den Effekt eines Kreises zu erzielen, der sich von klein nach groß ausdehnt und nach außen ausbreitet. Der Artikel umfasst CSS3-Animation (Animation), 2D-Transformation (Transformation: Skalierung).

In CSS3 wird eine neue Animationseigenschaft hinzugefügt, die dem Erstellen eines Animationsobjekts ähnelt.

Beispiel: Animation: Bounce 2,0 s, unendliches Ein- und Aussteigen;

Die Animation hat folgende Parameter:

Eigentum beschreiben CSS
Animation Kurzeigenschaft für alle Animationseigenschaften außer der Eigenschaft „animation-play-state“. 3
Animationsname Gibt den Namen der @keyframes-Animation an. 3
Animationsdauer Gibt die Anzahl der Sekunden oder Millisekunden an, die eine Animation zum Abschließen eines Zyklus benötigt. Der Standardwert ist 0. 3
Animations-Timing-Funktion Gibt die Geschwindigkeitskurve der Animation an. Der Standardwert ist „Ease“. 3
Animationsverzögerung Gibt an, wann die Animation startet. Der Standardwert ist 0. 3
Anzahl der Animationsiterationen Gibt an, wie oft die Animation abgespielt wird. Der Standardwert ist 1. 3
Animationsregie Gibt an, ob die Animation im nächsten Zyklus rückwärts abgespielt werden soll. Die Standardeinstellung ist „normal“. 3
Animation-Wiedergabe-Status Gibt an, ob die Animation läuft oder angehalten ist. Die Standardeinstellung ist „läuft“. 3
Animation-Füllmodus Gibt den Zustand eines Objekts außerhalb seiner Animationszeit an. 3

2D-Transformationen werden in CSS 3 mithilfe von zwei Eigenschaften implementiert:

Eigentum beschreiben CSS
verwandeln Wendet eine 2D- oder 3D-Transformation auf ein Element an. 3
Transform-Ursprung Gibt die Position des Basispunkts für die Transformation an. 3

Statische Darstellungen:

Wie im Code gezeigt:

<!DOCTYPE html>
<html>
<Kopf>
<meta http-equiv="Inhaltstyp" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<Stil>
@keyframes warnen {
 0% {
  transformieren: Skalierung(0);
  Deckkraft: 0,0;
 }
 25 % {
  transformieren: Skalierung(0);
  Deckkraft: 0,1;
 }
 50 % {
  transformieren: Skalierung (0,1);
  Deckkraft: 0,3;
 }
 75 % {
  transformieren: Skalierung (0,5);
  Deckkraft: 0,5;
 }
 100 % {
  transformieren: Skalierung(1);
  Deckkraft: 0,0;
 }
}
@-webkit-keyframes "warnen" {
 0% {
  -webkit-transform: Skalierung(0);
  Deckkraft: 0,0;
 }
 25 % {
  -webkit-transform: Skalierung(0);
  Deckkraft: 0,1;
 }
 50 % {
  -webkit-transform: Maßstab(0,1);
  Deckkraft: 0,3;
 }
 75 % {
  -webkit-transform: Maßstab(0,5);
  Deckkraft: 0,5;
 }
 100 % {
  -webkit-transform: Skalierung(1);
  Deckkraft: 0,0;
 }
}
 
.container {
 Position: relativ;
 Breite: 40px;
 Höhe: 40px;
 Rand: 1px durchgezogen #000;
}
/* Die Größe des kleinen Kreises unverändert lassen*/
.punkt {
 Position: absolut;
 Breite: 6px;
 Höhe: 6px;
 links: 15px;
 oben: 15px;
 -Webkit-Randradius: 20px;
 -moz-Randradius: 20px;
 Rand: 2px durchgehend rot;
 Rahmenradius: 20px;
 Z-Index: 2;
}
/* Erzeuge einen animierten Kreis (der sich nach außen ausbreitet und größer wird)*/
.puls {
 Position: absolut;
 Breite: 24px; 
 Höhe: 24px;
 links: 2px;
 oben: 2px;
 Rand: 6px durchgehend rot;
 -Webkit-Randradius: 30px;
 -moz-Randradius: 30px;
 Rahmenradius: 30px;
 Z-Index: 1;
 Deckkraft: 0;
 -webkit-animation: warnen, 3 s Ausstieg;
 -moz-animation: warnen, 3 s Ausstieg;
 Animation: Warnung, 3 s Ausklang;
 -webkit-animation-iteration-count: unendlich;
 -moz-animation-iteration-count: unendlich;
 Anzahl der Animationsiterationen: unendlich;
}
</Stil>
 
</Kopf>
 
<Text>
<div Klasse="Container">
    <div Klasse="Punkt"></div>
    <div Klasse="Puls"></div>
</div>
</body>
</html>

Zusammenfassen

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, dass der Inhalt dieses Artikels einen gewissen Lernwert für Ihr Studium oder Ihre Arbeit hat. Wenn Sie Fragen haben, können Sie eine Nachricht hinterlassen. Vielen Dank für Ihre Unterstützung von 123WORDPRESS.COM.

<<:  Methoden und Probleme zum Festlegen des HTML-Zeilenabstands

>>:  Detaillierte Erklärung, wie Nginx das Problem des domänenübergreifenden Zugriffs auf Front-End-Ressourcen löst

Artikel empfehlen

Zwei Möglichkeiten, damit IE6 Bilder im PNG-24-Format normal anzeigt

Methode 1: Bitte fügen Sie den folgenden Code nach...

Wenn Navicat eine Verbindung zu MySQL herstellt, meldet es 10060, 1045 Fehler und den Speicherort von my.ini

Navicat meldet beim Verbinden mit der Datenbank d...

Detaillierte Analyse mehrerer Situationen, in denen MySQL-Indizes fehlschlagen

1. Führende Fuzzy-Abfragen können keinen Index ve...

Vue implementiert eine Komponente zur dynamischen Abfrageregelgenerierung

1. Dynamische Abfrageregeln Die dynamischen Abfra...

Tutorial zur Verwendung von $attrs und $listeners in Vue

Inhaltsverzeichnis einführen Beispiel Zusammenfas...

MySQL 8.0 Upgrade-Erfahrung

Inhaltsverzeichnis Vorwort 1. Deinstallieren Sie ...

Tutorial zum Anzeigen und Ändern von MySQL-Zeichensätzen

1. Überprüfen Sie den Zeichensatz 1. Überprüfen S...

Detaillierte Erklärung: Die MySQL-Ausführungsplan-ID ist leer (Schlüsselwort UNION).

Einführung Während des Arbeitsprozesses kommt es ...

MySQL nimmt die durch Kommas getrennten Werte aus einem Feld heraus, um ein neues Feld zu bilden

1Beispiel: Um die in Abbildung 1 gezeigten Felder...

CSS-Isolationsproblem in Blazor

1. Umwelt VS 2019 16.9.0 Vorschau 1.0 .NET SDK 5....

Windows 10 1903 Fehler 0xc0000135 Lösung [empfohlen]

Windows 10 1903 ist die neueste Version des Windo...

Detaillierte Erklärung der Desktop-Anwendung mit Vue3 und Electron

Inhaltsverzeichnis Vue CLI erstellt ein Vue-Proje...

Kompatibilitätsprobleme mit CSS3-Farbverlaufshintergründen

Wenn wir eine Hintergrundfarbe mit Farbverlauf er...

Lösung für das zu langsame Herunterladen des Docker-Images

Der Download des Docker-Images hängt oder ist zu ...

Bei MySQL-Zeichentypen wird die Groß-/Kleinschreibung beachtet.

Standardmäßig sind MySQL-Zeichentypen nicht case-...