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
Erstellen Sie mit CSS3 und SVG den Animationseffekt des kreisf?rmigen Fortschrittsbalkens
04 Apr 2025
Sie k?nnen CSS3 und SVG verwenden, um einen Animationseffekt für kreisf?rmige Fortschrittsbalken zu erstellen. Die Schritte sind wie folgt: Erstellen Sie ein SVG -Element und definieren Sie einen kreisf?rmigen Pfad; Stellen Sie einen gepunkteten Linienstil für den kreisf?rmigen Pfad ein; Verwenden Sie die CSS3 -Animation, um den Versatz der gestrichelten Linie zu steuern. Stellen Sie einen Fortschrittsprozentsatz ein, indem Sie den anf?nglichen Offset der gestrichelten Linie einstellen.
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...
10 Online -CSS3 -Tools für Webdesigner
08 Mar 2025
Zehn Online -CSS3 -Design -Tools helfen Ihnen dabei, Webseiten für viele Menschen effizient zu erstellen. Webdesign ist nicht einfach. Lassen Sie sich nicht entmutigen! Zahlreiche Online -CSS3 -Design -Tools finden Sie auf dem Anruf, damit Sie die Designherausforderungen problemlos bew?ltigen k?nnen. In diesem Artikel werden zehn praktische Tools eingeführt, die Ihnen nicht nur helfen k?nnen, Ihre Arbeitseffizienz zu verbessern. Beginnen Sie jetzt Ihre kreative Reise! Verwandte Artikel:- 10 IE CSS3- und HTML5 Modern Browser-Emulatoren- 10 Online-Tools, mit denen Sie CSSS-5-Online-Ladeanimationsgeneratoren CSS3-Generator optimieren und formatieren k?nnen. Dieses einfache Werkzeug kann eine Vielzahl von Kreuzbrowser-kompatiblen CSS3-Codes, Runded Borders, Shadows, Shadows, Shadows, Shadows, Shadows, Shadows, Shadows, Schatten, @font-Gesicht usw. erzeugen usw.
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...
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...
Wie benutze ich CSS3 für ein fortgeschrittenes Styling in HTML5?
10 Mar 2025
Dieser Artikel bietet einen umfassenden Leitfaden zum erweiterten HTML5 -Styling mit CSS3. Es umfasst erweiterte Selektoren, Eigenschaften (wie Transformationen und Animationen), Optimierungstechniken (minimieren HTTP -Anforderungen, Komprimierung) und Best Practices (Modul
Hei?e Werkzeuge
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