首頁 JS特效 CSS3特效 CSS3的海上郵輪動畫效果

CSS3的海上郵輪動畫效果

CSS3的海上郵輪動畫效果

CSS3的海上郵輪動畫效果

css3海上郵輪動畫效果是一款透過css3 animation屬性製作的海面上輪船航行動畫特效。

<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.
    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.3184#.     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 "/>

免責聲明

本站所有資源皆由網友貢獻或各大下載網站轉載。請自行檢查軟體的完整性!本站所有資源僅供學習參考。請不要將它們用於商業目的。否則,一切後果都由您負責!如有侵權,請聯絡我們刪除。聯絡方式:admin@php.cn

相關文章

利用CSS3 animation動畫屬性實現輪播圖效果的方法詳解 利用CSS3 animation動畫屬性實現輪播圖效果的方法詳解

18 May 2018

CSS3的animation屬性可以像Flash製作動畫一樣,透過控制關鍵影格來控制動畫的每一步,實現更複雜的動畫效果。以下透過本文跟大家分享基於CSS3 animation動畫屬性實現輪播圖效果,需要的朋友參考下吧

如何熟練運用CSS3特效提升網頁的使用者體驗 如何熟練運用CSS3特效提升網頁的使用者體驗

09 Sep 2023

如何熟練運用CSS3特效提升網頁的使用者體驗隨著網路的發展,網頁設計與使用者體驗成為了網站開發的重要環節。而CSS3特效的應用,可為網頁增添動感與視覺效果,提升使用者體驗。本文將介紹幾種常見的CSS3特效及其程式碼範例,幫助開發者更熟練地運用CSS3特效,提升網頁的使用者體驗。過渡效果(Transition)過渡效果是CSS3中最基本的特效之一,透過改變某個屬

jQuery與CSS3超炫漢堡變形動畫特效 jQuery與CSS3超炫漢堡變形動畫特效

18 Jan 2017

這是一款使用jQuery和CSS3來製作的酷炫漢堡包變形動畫特效。此特效透過jQuery來附加按鈕事件,並透過CSS3 transform和animation來製作動畫特效。

css3點選顯示漣漪特效 css3點選顯示漣漪特效

24 Nov 2017

css3點選顯示漣漪特效,怎麼用css3做出點擊顯示漣漪特效,點選顯示漣漪的特效需要注意哪些面向?下面就給大家做個案例.

CSS3裡怎麼實現單選框動畫特效 CSS3裡怎麼實現單選框動畫特效

25 Nov 2017

CSS3裡要怎麼實現單選框動畫特效?為什麼要實現單選框動畫特效?以下我們給大家舉兩個例子,幫大家熟練用CSS3實現單選框動畫特效

純CSS3創意導航選單特效 純CSS3創意導航選單特效

17 Jan 2017

这是一款非常有创意的纯CSS3导航菜单特效。该导航菜单主要通过CSS3 transform和transition方法实现效果,非常简单。该特效由進擊的燊提供。

css3視覺特效的實現 css3視覺特效的實現

22 Mar 2018

這次帶給大家css3視覺特效的實現,實現css3視覺特效的注意事項有哪些,以下就是實戰案例,一起來看一下。

基於SVG與CSS3的可愛卡通小動物動畫特效 基於SVG與CSS3的可愛卡通小動物動畫特效

19 Jan 2017

這是一款以SVG濾鏡和CSS3製作的可愛小動物動畫特效。此特效中使用HTML標籤和SVG結合製作動物的外形,並透過CSS3 animation動畫來製作動物的各種動畫特效。

css3中filter的各種特效 css3中filter的各種特效

09 Oct 2016

css3中filter的各種特效

See all articles See all articles

Hot Tools

CSS文字組合成心型動畫特效

CSS文字組合成心型動畫特效

CSS文字組合成心型動畫特效

CSS3 SVG表白花動畫特效

CSS3 SVG表白花動畫特效

SS3 SVG表白花動畫特效是一款情人節動畫特效。

CSS的商城網站常用左側分類下拉導覽選單代碼

CSS的商城網站常用左側分類下拉導覽選單代碼

CSS的商城網站常用左側分類下拉導覽選單代碼

jQuery+CSS3情人節愛心特效

jQuery+CSS3情人節愛心特效

jQuery+CSS3情人節愛心特效是情人節懸掛擺動愛心動畫特效。

css3湯匙撈起湯圓動畫特效

css3湯匙撈起湯圓動畫特效

一碗可愛的湯圓表情,湯匙撈起一個湯圓動畫特效