CSS3-Animationseffekt für Seekreuzfahrten
CSS3-Animationseffekt für Seekreuzfahrten
Der CSS3-Seekreuzfahrt-Animationseffekt ist ein spezieller Schiffsanimationseffekt auf dem Meer, der über das CSS3-Animationsattribut erzeugt wird.
<svg version="1.1" class="ship" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 600 600" style="enable-background:new 0 0 600 600;"
<circle id="sun" class="ship1" cx="520.8" cy="369.8" r="44.9"/>
<rect id="smoke1" x="173" y="225" width="18" height="10"/>
<rect id="smoke2" x="173" y="225" width="18" height="10"/>
<rect id="smoke3" x="173" y="225" width="18" height="10"/>
<rect id="smoke4" x="173" y="225" width="18" height="10"/>
<g id="ship">
<polyline class="ship3" point="261,4,274,1 266,7,246,9 272,1,274,3 261,4,274,1 "/>
<ellipse class="ship1" cx="267.1" cy="253.7" rx="13.6" ry="13.3"/>
<path class="ship3" d="M274.8,244c5.2,4.1,6,11.6,1.8,16.9c0,0-2.4-5.9-7.6-10c-5.2-4.1-11.1-4.7-11.1-4.7
C262.1,240,9,269,6,239,9,274,8,244z"/>
<polyline class="ship1" point="269,6,274,3 272,1,274,3 270,9,268,1 "/>
331,6.286,6 332.296,9 344,9.296,9 345,5.319 447,5.310,5 "/>
<path class="ship1" d="M294.6,274.2l23.6,0l0.2,12.6l13.2-0.1l0.4,10.2h12.9l1.4,23.7c0,0-79.5,6.6-123.1, 7.3
c-34,4,0,5,97,4-8,2,97,4-8,2l-0,7-20,2l-15,9-0,2l0,1-11h-9,8L294,6,274,2z"/>
<g>
<polygon class="ship1" point="195,1.275 167.275 172,2.238,8 189,9.238,8 "/>
<polygon class="ship3" point="189,3,275 167,275 172,2,238,8 187,5,238,8 "/>
Alle Ressourcen auf dieser Website werden von Internetnutzern bereitgestellt oder von großen Download-Sites nachgedruckt. Bitte überprüfen Sie selbst die Integrität der Software! Alle Ressourcen auf dieser Website dienen nur als Referenz zum Lernen. Bitte nutzen Sie diese nicht für kommerzielle Zwecke. Andernfalls sind Sie für alle Folgen verantwortlich! Wenn ein Verstoß vorliegt, kontaktieren Sie uns bitte, um ihn zu löschen. Kontaktinformationen: admin@php.cn
Verwandter Artikel
Verschiedene Spezialeffekte des Filters in CSS3
09 Oct 2016
Verschiedene Spezialeffekte des Filters in CSS3
Können Sie in CSS3 unterschiedliche Breiten für Spalten festlegen?
31 Oct 2024
Spaltenbreiten in CSS3 anpassenFrage:Ist es möglich, in CSS3 unterschiedliche Breiten für Spalten anzugeben?Diskussion:In CSS3 ist die Spaltenbreite...
Wie erstelle ich zwei CSS3-Boxschatten für ein einzelnes Element?
02 Nov 2024
Erzielen von doppelten CSS3-Box-Schatten auf einem einzelnen ElementBei der Erstellung komplexer Schaltflächendesigns mit CSS3 besteht häufig die Notwendigkeit, mehrere Box-Schatten zu verwenden...
Ist CSS3 gegenüber XSL-FO die bessere Wahl für die Erstellung paginierter Dokumente?
17 Dec 2024
Die wachsende Rolle von CSS3 für die Erstellung paginierter DokumenteIm Bereich der Dokumenterstellung stellt sich die Frage nach der Verwendung von XSL-FO oder CSS3 für paginierte...
Zusammenfassung der neuesten 30 häufig verwendeten Selektoren in CSS3 (geeignet für Anfänger)
04 Aug 2016
Zusammenfassung der neuesten 30 häufig verwendeten Selektoren in CSS3 (geeignet für Anfänger)
HTML5 & CSS3 für die reale Welt, zweite Ausgabe
19 Feb 2025
Key Takeaways HTML5 und CSS3 sollen mit älteren Browsern eine Rückwärtskompatibilität sicherstellen, was bedeutet, dass Änderungen am Markup keine Layoutprobleme oder Fehler verursachen. Auch wenn ältere Browser neue Funktionen nicht vollständig unterstützen, werden sie keine Seiten brechen oder verursachen
CSS3-Übergänge vs. jQuery-Animationen: Was ist schneller für iPad-HTML5-Apps?
13 Nov 2024
Leistungsvergleich: CSS3-Übergänge vs. jQuery-AnimationenIn einer iPad-HTML5-App haben Sie Touch-Ereignisse für schnellere Reaktionsfähigkeit und ... implementiert.
CSS3-Übergänge vs. jQuery-Animationen: Was bietet eine schnellere Leistung für Webanimationen?
14 Nov 2024
CSS3-Übergänge vs. jQuery-Animationen: Was ist schneller? Um die Benutzererfahrung zu verbessern, implementieren Entwickler häufig Animationen in ihren Web...
HTML5CSS3-Spezialeffekte – Ball springt auf und ab
14 Oct 2016
HTML5CSS3-Spezialeffekte – Ball springt auf und ab
Hot Tools
CSS-Text wird zu einem herzförmigen Animationsspezialeffekt kombiniert
CSS-Text wird zu einem herzförmigen Animationsspezialeffekt kombiniert
CSS3 SVG-Ausdruck, Blumenanimation, Spezialeffekte
Der SS3 SVG-Spezialeffekt „Geständnisblumen-Animation“ ist ein Spezialeffekt für die Valentinstag-Animation.
CSS-Websites für Einkaufszentren verwenden häufig den Code für das Dropdown-Navigationsmenü der linken Kategorie
CSS-Websites für Einkaufszentren verwenden häufig den Code für das Dropdown-Navigationsmenü der linken Kategorie
jQuery+CSS3 Valentinstag-Liebeseffekt
jQuery+CSS3 Der Valentinstag-Liebesspezialeffekt ist ein hängender, schwingender Herzanimations-Spezialeffekt zum Valentinstag.
CSS3-Löffel schöpft klebrige Reisbällchen mit Spezialeffekten
Eine Schüssel mit süßem Klebreisbällchen-Ausdruck, ein Löffel, der eine Klebreisbällchen-Animation mit Spezialeffekten aufnimmt