Heim > Artikel > Web-Frontend > So erzielen Sie einen kreisförmigen Rotationseffekt in CSS3
So erzielen Sie einen kreisförmigen Rotationseffekt in CSS3
- WBOYOriginal
- 2022-03-22 12:17:193021Durchsuche
Methode: 1. Verwenden Sie „border-radius:100%“, um das Element kreisförmig festzulegen. 2. Verwenden Sie „@keyframes name {100%{transform:rotate(360deg);}}“, um die Animation festzulegen . Mit „animation :Name time“ werden Animationseffekte an Elemente gebunden.
Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3- und HTML5-Version, Dell G3-Computer.
So erzielen Sie einen kreisförmigen Rotationseffekt in CSS3
Mit dem Randradius können Sie die abgerundeten Ecken des äußeren Rands eines Elements festlegen. Bestimmt einen Kreis bei Verwendung eines Radius und eine Ellipse bei Verwendung von zwei Radien. Der Schnittpunkt dieses (ovalen) Kreises und der Umrandung erzeugt einen abgerundeten Eckeneffekt.
Mit @keyframes-Regeln können Sie Animationen erstellen.
Erstellen Sie Animationen, indem Sie schrittweise von einer CSS-Stileinstellung zur anderen wechseln.
Sie können die CSS-Stileinstellungen während des Animationsprozesses mehrmals ändern.
Geben Sie an, wann die Änderung erfolgt, indem Sie % oder die Schlüsselwörter „von“ und „bis“ verwenden, die 0 % bis 100 % entsprechen.
0 % ist, wenn die Animation beginnt, 100 % ist, wenn die Animation beendet ist.
Für eine optimale Browserunterstützung sollten Sie immer Selektoren für 0 % und 100 % definieren.
Die Syntax lautet:
@keyframes animationname {keyframes-selector {css-styles;}}Die Syntax des Animationsattributs lautet:
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
Animationsname Gibt den Namen des Keyframes an, der an den Selektor gebunden werden soll.
Animationsdauer Gibt an, wie viele Sekunden oder Millisekunden die Animation dauert muss abgeschlossen werden
animation-timing-function Legt fest, wie die Animation einen Zyklus abschließt.
animation-delay Legt das Verzögerungsintervall fest, bevor die Animation beginnt.
animation-iteration-count Definiert, wie oft die Animation abgespielt wird.
animation-direction gibt an, ob die Animation der Reihe nach rückwärts abgespielt werden soll.
animation-fill-mode gibt den Stil an, der auf das Element angewendet werden soll, wenn die Animation nicht abgespielt wird (wenn die Animation abgeschlossen ist oder wenn die Animation eine Verzögerung hat, bevor sie abgespielt wird).
animation-play-state Gibt an, ob die Animation ausgeführt oder angehalten wird.
Das Beispiel sieht wie folgt aus:
<html>
<head>
<meta charset="utf-8">
<title>123</title>
<style>
#example1
{
background:#dddddd;
width:100px;
height:100px;
border-radius:100%;
text-align:center;
animation:fadenum 5s;
}
@keyframes fadenum{
100%{transform:rotate(360deg);}
}
</style>
</head>
<body>
<div id="example1">
这是一个圆
</div>
<br><br>
</body>
</html>Ausgabeergebnis:
(Teilen von Lernvideos: CSS-Video-Tutorial)
Das obige ist der detaillierte Inhalt vonSo erzielen Sie einen kreisförmigen Rotationseffekt in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!