Effet d'animation de croisière en mer CSS3
Effet d'animation de croisière en mer CSS3
L'effet d'animation de croisière en mer CSS3 est un effet spécial d'animation de navigation de navire sur la mer produit via l'attribut d'animation CSS3.
<svg crackée="1.1" class="ship" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x ="0px" et="0px"
viewBox="0 0 600 600" style="enable-background:new 0 0 600 600;" xml:space="preserve">
<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" points="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" points="269,6 274,3 272,1 274,3 270,9 268,1 "/>
<polygon class="ship3" points="389,3 371,2 108,9 371,2 85,7 319,9 86,2 315,7 97,2 315,1 111,6 274,3 318,2 274,1 318,4 286,7
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" points="195,1 275 167 275 172,2 238,8 189,9 238,8 "/>
<polygon class="ship3" points="189,3 275 167 275 172,2 238,8 187,5 238,8 "/>
Toutes les ressources de ce site proviennent d'internautes ou sont réimprimées par les principaux sites de téléchargement. Veuillez vérifier vous-même l'intégrité du logiciel?! Toutes les ressources de ce site sont uniquement à titre de référence d'apprentissage. Merci de ne pas les utiliser à des fins commerciales. Sinon, vous serez responsable de toutes les conséquences ! En cas d'infraction, veuillez nous contacter pour la supprimer. Coordonnées : admin@php.cn
Article connexe
Créer un effet d'animation de barre de progression circulaire à l'aide de CSS3 et SVG
04 Apr 2025
Vous pouvez utiliser CSS3 et SVG pour créer un effet d'animation de la barre de progression circulaire. Les étapes sont les suivantes: créer un élément SVG et définir un chemin circulaire; Réglez un style de ligne pointillé pour le chemin circulaire; Utilisez l'animation CSS3 pour contr?ler le décalage de la ligne en pointillés; Réglez un pourcentage de progrès en ajustant le décalage initial de la ligne en pointillés.
Comment obtenir un effet de fondu en CSS3?: animations d'images clés et transitions??
27 Oct 2024
Transition CSS3 - Effet de fondu En CSS3, l'obtention d'un effet de fondu peut être obtenue grace à l'utilisation d'animations d'images clés. Cependant, c'est...
Comment puis-je créer un effet de fondu à l'aide de transitions CSS3??
28 Oct 2024
Transitions CSS3?:?obtention d'effets de fondu En CSS3, les transitions offrent un outil puissant pour créer des effets visuels dynamiques. Parmi ces effets, il y a...
Comment puis-je créer un effet de texte clignotant en fondu bidirectionnel avec CSS3??
16 Dec 2024
Réalisation d'un texte clignotant CSS 3 avec fondu bidirectionnel Votre code fourni anime efficacement le texte clignotant en contr?lant l'opacité...
Comment puis-je créer un effet de sélection CSS3 réactif sans valeurs codées en dur??
06 Dec 2024
Effet de sélection en CSS3?: éviter les valeurs spécifiques pour l'adaptation du texte Dans l'animation CSS3, il est souvent souhaitable de créer un effet de sélection, où le texte...
Comment puis-je créer un effet de texte clignotant classique en utilisant uniquement des animations CSS3??
29 Nov 2024
Produire un effet de clignotement classique avec des animations CSS3La question se pose : comment créer un effet de texte clignotant, rappelant la vieille école...
Les transitions CSS3 fournissent-elles des événements pour détecter les points de début et de fin??
18 Nov 2024
Comprendre les événements de transition CSS3 Les transitions CSS3 permettent des animations fluides et des effets visuels sur les éléments Web. Pour valoriser l'utilisateur...
Pourquoi mon animation slide-up utilisant CSS3 @keyframes ne fonctionne-t-elle pas??
28 Oct 2024
Transition CSS3 - Effet de fondu sortantEn utilisant CSS3, vous pouvez facilement implémenter des effets de fondu pour améliorer l'expérience utilisateur. Cependant, si vous rencontrez...
Comment puis-je détecter le début et la fin des transitions CSS3??
31 Dec 2024
Détection des événements de transition CSS3 Les transitions dans CSS3 ajoutent des effets dynamiques aux éléments Web, améliorant ainsi leur réactivité. Pourtant, c'est souvent...
Outils chauds Tags
Outils chauds
Le texte CSS est combiné dans un effet spécial d'animation en forme de c?ur
Le texte CSS est combiné dans un effet spécial d'animation en forme de c?ur
Effets spéciaux d'animation de fleurs d'expression CSS3 SVG
L'effet spécial d'animation de fleur de confession SS3 SVG est un effet spécial d'animation pour la Saint-Valentin.
Les sites Web des centres commerciaux CSS utilisent couramment le code du menu de navigation déroulant de la catégorie de gauche
Les sites Web des centres commerciaux CSS utilisent couramment le code du menu de navigation déroulant de la catégorie de gauche
jQuery+CSS3 Effet d'amour pour la Saint-Valentin
jQuery + CSS3 Valentine's Day Love Special Effect est un effet spécial d'animation de c?ur oscillant suspendu pour la Saint-Valentin.
cuillère css3 ramassant des effets spéciaux d'animation de boulettes de riz gluant
Un bol d'expression mignonne de boulettes de riz gluant, une cuillère ramassant des effets spéciaux d'animation de boulettes de riz gluant