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