Maison Effets spéciaux JS Effets spéciaux CSS3 Effet d'animation de croisière en mer CSS3

Effet d'animation de croisière en mer CSS3

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 "/>

Clause de non-responsabilité

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

Comment obtenir un effet de retournement d'image en CSS3 Comment obtenir un effet de retournement d'image en CSS3

23 Apr 2023

Dans la conception de sites Web, les images font partie des éléments indispensables. Il est souvent nécessaire d'effectuer des effets spéciaux sur les images, tels que des effets de retournement d'image. Alors, comment utiliser CSS3 pour obtenir l’effet de retournement d’image ? Cet article présentera en détail la méthode permettant d'obtenir un effet de retournement d'image dans CSS3. 1. Implémentation de l'effet de retournement d'image dans CSS3 CSS3 nous offre deux façons de réaliser le retournement d'image : 1. Utilisez l'attribut transform pour retourner l'image 2. Utilisez l'attribut backface-visibility pour retourner l'image 2. Utilisez tran

Comment utiliser HTML5+css3 pour obtenir des effets spéciaux d'animation de texte à effet de particules (code complet ci-joint) Comment utiliser HTML5+css3 pour obtenir des effets spéciaux d'animation de texte à effet de particules (code complet ci-joint)

25 Sep 2018

Lorsque nous parcourons les pages Web, nous constatons que les pages Web d'aujourd'hui sont de plus en plus belles et que de nombreux effets spéciaux d'animation deviennent de plus en plus cool. Ceci est indissociable du développement en profondeur de HTML5 et CSS3. Aujourd'hui, nous allons partager un effet de texte basé sur HTML5 et CSS3 - effet d'animation de texte à effet de particules. Le contenu de cet article explique comment utiliser HTML5+css3 pour obtenir des effets spéciaux d'animation de texte à effet de particules. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Comment implémenter des effets d'animation de boutons radio en CSS3 Comment implémenter des effets d'animation de boutons radio en CSS3

25 Nov 2017

Comment implémenter des effets d'animation de boutons radio en CSS3 ? Pourquoi devons-nous implémenter des effets d’animation de boutons radio ? Donnons deux exemples pour vous aider à maîtriser l’utilisation de CSS3 pour réaliser des effets d’animation de boutons radio.

Étapes de mise en œuvre de la technologie d'animation en CSS3 Étapes de mise en œuvre de la technologie d'animation en CSS3

01 Dec 2017

Si vous avez besoin d'obtenir des effets d'animation en CSS3, trois technologies seront utilisées : transformation-origine, transition, transition-delay et transition-timing-function. Aujourd'hui, je vais vous donner une idée claire et voir comment obtenir des effets d'animation.

À propos de l'animation CSS3 pour obtenir un effet d'animation image par image À propos de l'animation CSS3 pour obtenir un effet d'animation image par image

20 Jun 2018

Cet article présente principalement l'animation CSS3 pour obtenir des effets d'animation image par image. Les amis intéressés peuvent s'y référer.

Pure CSS3 réalise un effet d'animation de chargement de page (avec code) Pure CSS3 réalise un effet d'animation de chargement de page (avec code)

15 Oct 2018

Lors de l'ouverture d'une page, vous rencontrez souvent une situation de chargement de la page. En tant que développeur front-end, savez-vous comment utiliser CSS3 pour obtenir des effets d'animation de chargement de page ? Cet article partagera avec vous un code d'effet d'animation de chargement CSS3 sympa et pratique. Il a une certaine valeur de référence et les amis intéressés peuvent y jeter un œil.

Comment implémenter des effets d'animation de défilement de page en CSS3 ? Comment implémenter des effets d'animation de défilement de page en CSS3 ?

06 Aug 2018

Cet article présente principalement CSS3 pour implémenter des effets d'animation de défilement de page. Cet article présente principalement CSS3 pour implémenter des effets d'animation de défilement de page. Nous devons donc savoir sur la page d’accueil, qu’est-ce que l’AOS ? AOS est une bibliothèque d'outils permettant d'animer des éléments lors du défilement de la page.

Comment implémenter l'effet d'animation de chargement en CSS3 Comment implémenter l'effet d'animation de chargement en CSS3

25 Nov 2017

Aujourd'hui, nous allons vous apprendre à utiliser CSS3 pour créer un effet d'animation de chargement. Pourquoi devrions-nous utiliser Loadning pour créer des effets d'animation ? Laissez-nous vous donner un exemple. Je crois que toute votre confusion disparaîtra après l'avoir lu.

Comment obtenir un effet de retour à la ligne automatique en CSS3 Comment obtenir un effet de retour à la ligne automatique en CSS3

06 Dec 2018

Méthodes CSS3 pour obtenir des effets de retour à la ligne automatique : 1. Utilisez l'attribut word-break pour obtenir des effets de retour à la ligne automatique. 2. Utilisez l'attribut word-wrap pour obtenir des effets de retour à la ligne automatique ;

See all articles See all articles

Hot Tools

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

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

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

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 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

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