CSS3 sea cruise animation effect
CSS3 sea cruise animation effect
The css3 sea cruise animation effect is a ship sailing animation special effect on the sea produced through the css3 animation attribute.
<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;" 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 "/>
All resources on this site are contributed by netizens or reprinted by major download sites. Please check the integrity of the software yourself! All resources on this site are for learning reference only. Please do not use them for commercial purposes. Otherwise, you will be responsible for all consequences! If there is any infringement, please contact us to delete it. Contact information: admin@php.cn
Related Article
css3+jquery realizes the page turning animation effect of questionnaire answer card
28 May 2017
The special effects of this optional survey are in the form of tabs, and each time you answer a question, it automatically switches to the next one, which is quite unique. Uses jQuery and CSS3, suitable for HTML5 browsers.
How to use HTML5+css3 to achieve particle effect text animation special effects (complete code attached)
25 Sep 2018
When we browse web pages, we will find that today’s web pages are becoming more and more beautiful, and many animation special effects are becoming more and more cool. This is inseparable from the in-depth development of HTML5 and CSS3. Today we are going to share a text effect based on HTML5 and CSS3 - particle effect text animation effect. The content of this article is about how to use HTML5+css3 to achieve particle effect text animation special effects. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
24 Jun 2016
15 amazing CSS3 animation effects demonstrations
What to use to achieve css3 animation effect
07 Jun 2022
To achieve CSS3 animation effects: 1. Use the "@keyframes" rule and the animation attribute to achieve animation effects; 2. Use the transition attribute to achieve animation effects. The syntax is "element {transition: attribute name time speed curve delay}".
About CSS3 animation to achieve frame-by-frame animation effect
20 Jun 2018
This article mainly introduces CSS3 animation to achieve frame-by-frame animation effects. It has certain reference value. Interested friends can refer to it.
CSS3 animation implements frame-by-frame animation effect example introduction
09 Mar 2017
This article mainly introduces CSS3 animation to achieve frame-by-frame animation effects. It has certain reference value. Interested friends can refer to it.
Pure CSS3 mouse over image mask layer animation effect
06 Mar 2017
This article mainly introduces the animation effects of pure CSS3 mouse sliding over the image mask layer.
24 Jun 2016
3D Grid Effect ? Use CSS3 to create grid animation effects
Several methods to achieve preload animation effect in CSS3
20 Jun 2018
This article mainly introduces CSS3 animation: 5 examples of preload animation effects. The content is quite good. I will share it with you now and give it as a reference.
Hot Tools
CSS text is combined into a heart-shaped animation special effect
CSS text is combined into a heart-shaped animation special effect
CSS3 SVG expression flower animation special effects
SS3 SVG confession flower animation special effect is a Valentine's Day animation special effect.
CSS shopping mall websites commonly use left category drop-down navigation menu code
CSS shopping mall websites commonly use left category drop-down navigation menu code
jQuery+CSS3 Valentine's Day love special effects
jQuery+CSS3 Valentine's Day Love Special Effect is a Valentine's Day hanging swinging heart animation special effect.
css3 spoon scooping up glutinous rice balls animation special effects
A bowl of cute glutinous rice balls expression, a spoon scooping up a glutinous rice balls animation special effects