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

Konfigurationsmethode für das Nginx-Anforderungslimit

Nginx ist ein leistungsstarker, leistungsstarker ...

Tutorial zur Installation von mysql5.7.23 auf Ubuntu 18.04

In diesem Artikel erfahren Sie, wie Sie mysql5.7....

Skriptbeispiel zum Starten und Stoppen von Spring-Boot-Projekten in Linux

Es gibt drei Möglichkeiten, ein Springboot-Projek...

Tutorial zur Installation von mysql-8.0.18-winx64 unter Windows (mit Bildern und Text)

1. Laden Sie das Installationspaket herunter Das ...

CentOS 7.x-Bereitstellung von Master- und Slave-DNS-Servern

1. Vorbereitung Beispiel: Zwei Maschinen: 192.168...

Tutorial zum Erstellen einer VSCode+CMake+Clang+GCC-Umgebung unter Win10

Ich möchte C/C++ verwenden, um grundlegende Daten...

Ausnahmefehler beim Packen von Webpack-Dateien

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

So fahren Sie eine MySQL-Instanz sicher herunter

In diesem Artikel wird der Vorgang zum Herunterfa...

Hinweise zur Groß-/Kleinschreibung bei MySQL

Inhaltsverzeichnis Die Groß-/Kleinschreibung von ...

Detaillierte Erklärung der Kernfunktionen und der Ereignisbehandlung von jQuery

Inhaltsverzeichnis Ereignis Seite wird geladen Ve...

HTML+CSS zum Erreichen eines Surround-Reflexionsladeeffekts

In diesem Artikel wird hauptsächlich die Implemen...

Lösen Sie das Problem der unsicheren Docker x509-Registrierung

Nach der Installation von Docker trat beim Versuc...

Praxis der Vue Global Custom-Anweisung Modal Drag

Inhaltsverzeichnis Hintergrund Umsetzungsideen Er...

TD-Breitenproblem beim Zusammenführen von TD-Zellen

Im folgenden Beispiel ist die Anzeige normal, wenn...

JavaScript-Entwurfsmuster – Muster der Verantwortungskette

Inhaltsverzeichnis Überblick Code-Implementierung...