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

HTML-Grundlagen-Zusammenfassungsempfehlung (Titel)

HTML: Titel Überschriften werden durch Tags wie &...

MySQL-Transaktionsanalyse

Transaktion Eine Transaktion ist eine grundlegend...

Eine kurze Diskussion über ereignisgesteuerte Entwicklung in JS und Nodejs

Inhaltsverzeichnis Ereignisgesteuert und Publish-...

Detaillierte Erläuterung der benutzerdefinierten Anweisungen zur Vue.js-Quellcodeanalyse

Vorwort Zusätzlich zu den standardmäßig integrier...

Ausnahmefehler beim Packen von Webpack-Dateien

Vor dem Verpacken im Webpack müssen wir sicherste...

MySQL-Grundlagen-Tutorial: Detaillierte Erklärung der DML-Anweisungen

Inhaltsverzeichnis DML-Anweisungen 1. Datensätze ...

Erste Schritte mit den JavaScript-Grundlagen

Inhaltsverzeichnis 1. Wo man JavaScript schreibt ...

Kalendereffekt basierend auf jQuery

In diesem Artikelbeispiel wird der spezifische Co...

Nodejs verwendet Readline, um zur Eingabe von Beispielcode für Inhalte aufzufordern

Inhaltsverzeichnis Vorwort 1. bat führt js aus 2....

So benennen Sie in Linux mehrere Dateien gleichzeitig um

Vorwort In unserer täglichen Arbeit müssen wir hä...

Meta Viewport ermöglicht die Vollbildanzeige von Webseiten auf dem iPhone

In meiner Verzweiflung dachte ich plötzlich: Wie i...

Automatische Hot-Deployment/Neustart von Jenkins+Tomcat und Lösungen für aufgetretene Probleme (empfohlen)

1. Hintergrund Die Projekte des Unternehmens wurd...

Zusammenfassung der Unterschiede zwischen den Methoden find() und filter() in JavaScript

Inhaltsverzeichnis Vorwort JavaScript find()-Meth...

Die Iframe-Aktualisierungsmethode ist bequemer

So aktualisieren Sie Iframe 1. Zum Aktualisieren k...

Hinweise zum MySQL-Datenbank-Sicherungsprozess

Heute habe ich mir einige Dinge im Zusammenhang m...