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

Das Textdesign einer Webseite sollte aussehen wie die Kleidung von intelligenten Mädchen

<br />„Es gibt keine hässlichen Frauen auf d...

Einführung in Linux und die am häufigsten verwendeten Befehle (leicht zu erlernen, kann aber mehr als 95 % der Probleme lösen)

Linux ist derzeit das am weitesten verbreitete Se...

Füllen Sie die Suchfunktion auf der HTML-Seite aus

Ich habe kürzlich an einem Framework gearbeitet, ...

Die Tücken der automatischen Inkrementierung numerischer MySQL-Typen

Beim Entwurf von Tabellenstrukturen gehören numer...

Detaillierte Schritte zum Konfigurieren von my.ini für mysql5.7 und höher

Im entpackten Paket von Windows 64-Bit MySQL 5.7 ...

Fünf Richtlinien zum Schreiben von wartungsfreundlichem CSS-Code

1. Fügen Sie am Anfang des Stylesheets einen Komme...

Detaillierte Erklärung zum Upgrade von Softwarepaketversionen unter Linux

Im Linux-Umfeld möchten Sie prüfen, ob eine besti...

Analyse der Initialisierung des Quellcodes des Linux-Kernel-Schedulers

Inhaltsverzeichnis 1. Einleitung 2. Grundkonzepte...

Eine kurze Diskussion über die Verwendung der Web Storage API

Inhaltsverzeichnis 1. Lokale Speichertechnologie ...

Zusammenfassung der MySQL-Slow-Log-Praxis

Langsame Protokollabfragefunktion Die Hauptfunkti...

Synology NAS verwendet Docker-Container zum Erstellen eines KMS-Aktivierungsservers zum Aktivieren des Windows-Systems und von Office (Bedienungsschritte)

Vorwort Das über KMS aktivierbare Windows-System ...

Anwendungsbeispiele für die virtuelle Liste des WeChat-Applets

Inhaltsverzeichnis Vorwort Was ist eine virtuelle...

Das Vue-Projekt konfiguriert den Webpack-Obfuscator, um Codeverschlüsselung und -verschleierung zu implementieren.

Hintergrund Der Unternehmenscode wird Dritten zur...

Beispielcode zum Hervorheben von Suchbegriffen im WeChat-Miniprogramm

1. Einleitung Wenn Sie im Projekt auf eine Anford...

URL-Rewrite-Modul 2.1 URL-Rewrite-Modul – Regeln schreiben

Inhaltsverzeichnis Voraussetzungen Einrichten ein...