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!