Erstellen Sie leistungsstarke CSS -Animationseffekte ohne JavaScript

Dieser Artikel untersucht die Funktionen von CSS zum Erstellen von Webanimationen und minimiert den Bedarf an JavaScript. Wir werden mehrere Animationen erstellen und die Stärken und Grenzen von CSS mit JavaScript vergleichen. Ein grundlegendes Verständnis von CSS und HTML wird angenommen.

Key Takeaways:

• Nutzen Sie CSS und SVG für komplexe Animationen, reduzieren Code und Fehler.
• Master stroke-dasharray und stroke-dashoffset zum Zeichnen von Animationen.
• Verwenden Sie CSS, um visuell ansprechende Effekte (wie eine flackernde Kerze) mit Schatten und Übergängen zu erzeugen.
• Verwenden Sie CSS-Pseudoklassen und Geschwisterauswahlgeräte für dynamische Interaktionen ohne JavaScript.
• Erkennen Sie CSS -Einschränkungen: Komplexe Animationssequenzierung, Kurvenanimation und bestimmte dynamische Steuerelemente erfordern häufig JavaScript.
• CSS für reaktionsschnelle, hardwarebeschleunigte Animationen erforschen und JavaScript auf Mobilgeräte möglicherweise übertreffen.

Zeichnenanimationsbeispiel:

Diese täuschend einfache Animation zeichnet ein Logo.

wir beginnen mit einem SVG -Logo:

<svg xmlns="http://www.w3.org/2000/svg" width="279.15" height="343.95" overflow="visible" stroke="#000" stroke-width="1">
 <path d="M110.57 248.64c-22.7-21.25-45.06-42.09-67.31-63.06-11.73-11.06-23.32-22.26-34.87-33.51C-2.6 141.35-2.86 128 8.02 117.42 47.67 78.82 87.46 40.35 127.21 1.84c.46-.44 1.03-.77 2.47-1.84 12.52 13.66 25.06 27.34 37.1 40.47-4.44 4.76-10.06 11.31-16.21 17.33-22.69 22.2-45.56 44.22-68.34 66.32-7.89 7.66-7.97 13.48.11 21.07 19.38 18.19 38.85 36.29 58.37 54.33 7.53 6.96 7.75 12.42.32 19.64-10.01 9.72-20.05 19.4-30.46 29.48z"/>
 <path d="M150.02 343.95c-13.41-13.03-26.71-25.97-40.2-39.08 1.23-1.32 2.19-2.44 3.24-3.46 27.8-26.95 55.61-53.89 83.42-80.83 8.32-8.05 8.41-13.92-.01-21.79-19.54-18.27-39.14-36.47-58.77-54.63-6.52-6.04-6.76-12.11-.37-18.33 10.24-9.96 20.52-19.87 31.15-30.16 6.33 5.89 12.53 11.58 18.65 17.37 27.53 26.03 55.07 52.05 82.52 78.16 12.57 11.96 12.66 24.78.33 36.75-38.99 37.85-78.04 75.64-117.07 113.45-.82.79-1.71 1.51-2.89 2.55z"/>
</svg>

Wir verstecken die Füllung zunächst mit fill-opacity: 0;. Mithilfe von stroke-dasharray: 1; und stroke-dashoffset: 1; mit Animation erstellen wir dann den Zeichnungseffekt. Schließlich beleben wir fill-opacity bis 1 für den vollständigen Effekt.

CSS -Kerzenanimation:

Dieses Beispiel verwendet nur CSS (und HTML), um eine Kerze mit einer flackernden Flamme zu erstellen. Die Animation wird durch ein Kontrollkästchen ausgelöst, das mit CSS -Selektoren und Übergängen geschickt versteckt und kontrolliert wird. Das Flicker der Flamme wird erreicht, indem seine Hintergrundfarbe und Position animiert.

Pulsanimation:

Eine einfache Pulsanimation wird mit box-shadow und KeyFrames erstellt, wodurch eine andere kurze CSS -Animationstechnik zeigt.

CSS -Einschränkungen:

während mächtig, haben CSS -Animationen Einschränkungen. Komplexe Sequenzierung, Kurvenanimationen und bestimmte dynamische Steuerelemente werden von JavaScript -Bibliotheken wie Greensock besser behandelt.

Schlussfolgerung:

cs Dieser Artikel bietet eine Grundlage für die Erforschung des Potenzials der CSS -Animation und der Integration von JavaScript für komplexere Szenarien.

Das obige ist der detaillierte Inhalt vonErstellen Sie leistungsstarke CSS -Animationseffekte ohne JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!