18個超有趣的SVG繪製動畫賞析

来源:http://www.cnblogs.com/html5tricks/archive/2017/11/02/7774947.html
-Advertisement-
Play Games

SVG作為時下比較新穎的技術標準,已經建立了很多基於SVG的前端項目。由於SVG在繪製路徑上非常靈活,我們將很多網頁上的元素使用SVG來繪製而成,有各種人物、小圖標、小動畫等等。今天我們收集了18個非常新奇有趣的SVG繪製動畫,這些動畫大部分都是使用SVG結合一定的CSS3特性實現而成,效果讓人大為 ...


SVG作為時下比較新穎的技術標準,已經建立了很多基於SVG的前端項目。由於SVG在繪製路徑上非常靈活,我們將很多網頁上的元素使用SVG來繪製而成,有各種人物、小圖標、小動畫等等。今天我們收集了18個非常新奇有趣的SVG繪製動畫,這些動畫大部分都是使用SVG結合一定的CSS3特性實現而成,效果讓人大為震撼,一起來看看吧。

1、HTML5 SVG實現會跳舞的花朵 4種跳舞心情

這又是一款很有趣的HTML5 SVG動畫,它是一朵會跳舞的花。首先,花朵和花盆均採用SVG進行繪製,雖然是簡單的線條以及單純的顏色,但是繪製出的效果還是相當逼真的。接下來是給花朵進行跳舞動畫的渲染,結合CSS3的動畫屬性以及JavaScript的動態渲染,讓這朵花賦予了4種不同心情下的跳舞動畫,點擊按鈕即可切換當前心情下的跳舞動畫,真的是非常可愛。

html5-svg-dancing-flower

線上演示   源碼下載

2、jQuery SVG高端圓形菜單導航

這是一款非常富有創意的jQuery菜單導航插件,菜單項的小圖標是使用SVG路徑繪製而成,簡單實用。同時每一個菜單項排列成一個圓圈,菜單項切換時,中間的圓圈也會隨著移動,而且中間的大圓圈中會顯示對應菜單項的描述和鏈接按鈕。

jquery-svg-circle-menu

線上演示   源碼下載

3、HTML5 SVG天氣預報動畫卡片 可模擬多種天氣

之前我們介紹過一些關於天氣預報的各種應用和插件,有天氣預報動畫圖標,比如CSS3天氣預報動畫圖標。今天我們要分享一款基於HTML5和SVG的天氣預報動畫卡片,我們可以點擊卡片中的天氣狀況按鈕,即可模擬對應的天氣動畫,動畫模擬了下雨、下雪、雷陣雨、颳風、晴天這些動畫特效。

html5-svg-weather-card

線上演示   源碼下載

4、HTML5 SVG實現可愛的小狗和狐狸動畫

今天我們要給大家分享一款基於HTML5和SVG的動畫動畫,是一隻可愛的小狗和一隻漂亮的狐狸。我們用SVG繪製了他們的外形,並且通過HTML5腳本控制它們的輪廓在實現各種表情的切換。比如小狗會搖尾巴、吐舌頭等,小狐狸可以行走,畫面非常可愛。

html5-svg-dog-fox-animation

線上演示   源碼下載

5、HTML5 SVG實現老爺爺拄拐杖行走動畫

這是一款基於HTML5和SVG的人物行走動畫,圖中使用SVG繪製出了一個拄著拐杖的老爺爺,描繪的活靈活現,可見目前SVG對繪圖方面支持得也十分完美。另外我們又使用HTML5技術讓這個老爺爺能夠拄著拐杖一步步行走,這和之前我們分享的CSS3人物行走動畫非常類似,怎麼樣,是不是很酷?

html5-svg-old-man-walking

線上演示   源碼下載

6、SVG/CSS3實現按鈕點擊波紋動畫

之前對於按鈕動畫,我們分享過很多基於jQuery和CSS3的滑鼠滑過按鈕動畫,有滑過後發光的,也有波紋的,都非常不錯。這次我們要分享的是一款基於CSS3和SVG的波紋按鈕動畫,滑鼠點擊按鈕時,按鈕上將會出項各種形狀的波紋特效,一共有4組波紋動畫效果。

svg-css3-ripple-button

線上演示1 線上演示2 線上演示3 線上演示4 源碼下載

7、CSS3/SVG繪製的悉尼歌劇院

這是一款基於純CSS和SVG實現的歌劇院建築,CSS3的強大和SVG的靈活打造了這個用不同線條勾勒的悉尼歌劇院,另外還有海面和天空中的太陽和白雲也描繪的活靈活現,在網頁繪製方面,除了炫酷的Canvas外,SVG也是不錯的選擇。

css3-svg-opera-house

線上演示   源碼下載

8、SVG實現吸血蝙蝠變身動畫

今天我們要分享一款基於SVG的炫酷動畫,它是一隻可以變身為吸血僵屍的吸血蝙蝠。首先我們利用SVG的路徑繪製了一隻會扇動翅膀的蝙蝠,並且蝙蝠在飛行的過程中還有陰影,這樣更顯得具有真實感。然後隨便在頁面空白地方點擊滑鼠,飛行的吸血蝙蝠立馬搖身一變,變成了一隻惡魔般的吸血僵屍,這中間我們僅僅是對SVG的路徑進行了切換而已。

svg-vampire-bat

線上演示   源碼下載

9、4 組有趣的 HTML5 SVG 文字播放動畫

關於文字動畫,我們之前介紹過不少基於jQuery和CSS3的文字特效,比如HTML5/CSS3 3D文字外翻效果HTML5/CSS3發光文字 可自定義文字色彩。今天要來分享4組有趣的HTML5 SVG 文字播放動畫,利用SVG的路徑描繪特性,文字的外觀很有個性,同時點擊按鈕即可讓文字通過各種動畫展現在屏幕上,動畫特效非常酷。

html5-svg-text-animation

線上演示   源碼下載

10、HTML5 SVG 世界地圖旋轉動畫

這是一個以世界地圖為背景的簡易地球儀,通過HTML5和SVG的相關特性,實現了這個世界地圖地球儀的旋轉動畫。地圖旋轉期間,會有飛機在地圖上自由飛行,這樣讓這個動畫更加逼真。與此相關的另外一個HTML5 Canvas 地球旋轉3D動畫也是非常的不錯。

html5-word-map-rotate

線上演示   源碼下載

11、SVG圖片波浪效果渲染動畫

今天我們要為大家分享一款很酷的SVG圖片動畫,主要是圖片上會出現波浪的渲染動畫。實現原理是在圖片上方利用SVG路徑繪製了一層蒙板,然後蒙版進行一定的隨機扭曲就形成了圖片上方波浪翻滾的動畫特效,而且也十分逼真。

svg-image-wave-effect

線上演示   源碼下載

12、基於HTML5和SVG的手機菜單動畫

之前我們分享過很多手機端的jQuery菜單和CSS3菜單,也有很多是PC端的菜單,都非常不錯。今天要接著分享一款基於HTML5和SVG的手機端菜單動畫,這款菜單有2種主題和動畫風格,分別是側邊飛入和底部飛入動畫,同時點擊菜單展開按鈕又會出現旋轉的動畫特效。

html5-svg-mobile-menu

線上演示   源碼下載

13、純CSS3藍色蝴蝶動畫

之前我們分享過幾個漂亮的HTML5蝴蝶飛舞動畫,比如超炫酷HTML5 Canvas蝴蝶飛舞動畫HTML5 SVG 3D蝴蝶飛舞動畫都非常炫酷。今天要分享的這款蝴蝶動畫是基於純CSS3的,雖然沒有前面蝴蝶動畫那麼絢麗,但是藍色的蝴蝶翅膀扇動起來也是別有一番風味的。

pure-css3-blue-butterfly

線上演示   源碼下載

14、SVG邊框可連續變化的滑鼠滑過動畫按鈕

今天我們要給大家分享一款基於SVG的滑鼠滑過動畫按鈕,這款按鈕的滑鼠滑過動畫呈現的是按鈕邊框線條可連續變化,非常絢麗。像這樣的滑鼠滑過按鈕在之前我們也分享過很多,大家可以回顧一下純CSS3滑鼠滑過按鈕動畫 多種動畫風格jQuery/CSS3多種滑鼠滑過動畫按鈕集合,也許其中有些按鈕效果可以用得上。

svg-border-animate-button

線上演示   源碼下載

15、超炫酷HTML5 Canvas蝴蝶飛舞動畫

還記得很早以前我們為大家分享過一款非常炫酷的HTML5蝴蝶3D動畫,它是基於HTML5和SVG實現的。這次我們要再一次為大家介紹另外一款同樣也很酷的HTML5 Canvas蝴蝶飛舞動畫,蝴蝶是在Canvas上繪製而成,利用HTML5的動畫特性實現蝴蝶的飛舞,大家可以學習一下。

html5-canvas-butterfly

線上演示   源碼下載

16、HTML5 SVG 繪製唐老鴨卡通形象

利用CSS3可以繪製很多人物和動物形象,比如之前介紹的純CSS3繪製可愛小男孩動畫純CSS3繪製可愛的蚱蜢,可見CSS3十分強大。這次我們要介紹的是利用HTML5和SVG來繪製的唐老鴨卡通形象,SVG的path特性非常靈活,可以讓你繪製任何路徑。

html5-svg-donald-duck

線上演示   源碼下載

17、CSS3/SVG實現滑鼠滑過3D展開文字描述圖層

現在很多HTML5動畫都會結合SVG來製作,因為SVG可以更方面地描述界面圖形元素。今天要介紹的一款動畫就是利用CSS3結合SVG實現的,它可以讓我們在滑鼠滑過圖片時,通過3D立體的視覺效果展示文字描述圖層,動畫效果非常絢麗。

css3-svg-hover-3d-layer

線上演示   源碼下載

18、CSS3/SVG沙漏式Loading載入動畫

之前我們也已經分享過很多Loading動畫進度條動畫了,很多都是比較實用的應用。今天我們要再來分享一款基於CSS3和SVG的沙漏式Loading載入動畫,儘管實現起來也比較簡單,但是模擬效果相當逼真,適合來做整個頁面載入時的等待動畫。

css3-svg-hourglass-loading

線上演示   源碼下載

以上就是18個超有趣的SVG繪製動畫,怎麼樣是不是很過癮?小伙伴如果喜歡前端,喜歡SVG,喜歡HTML5,那麼就請收藏此文吧。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 金三銀四搞事季,前端這個近年的熱門領域,搞事氣氛特別強烈,我朋友小偉最近就在瘋狂面試,遇到了許多有趣的面試官,有趣的面試題,我來幫這個搞事 boy 轉述一下。 以下是我一個朋友的故事,真的不是我。 “小偉,你說說這幾行代碼會輸出什麼?” 當面試官在 Sublime 打出這幾行代碼時,我竟有點矇蔽。蛤 ...
  • 一、介紹 老鐵們,這次是JS的面向對象的編程OOP(雖然我沒有對象,心累啊,但是可以自己創建啊,哈哈)。 JS高程里第六章的內容,這章內容在我看來是JS中很難理解的一部分。所以分成三篇博客來逐個理清。 這是第一篇:理解對象,認識對象屬性的類型。 二、理解對象 書中原話 ECMA 262中把對像定義為 ...
  • 前言 今天夜間接到某BAT面試電話,問了些演算法的問題,說實話,感覺有點蒙逼,尤其是被問到了節點樹遍歷的問題。 對於樹形遍歷,在平常開發中很少碰到,多數碰到的是對象的深複製,也就想當然的遞歸調用了,根本沒考慮過性能方面的問題。 當面試官讓我用另一種方式進行遍歷,還有其他方式?(提示: 模擬棧或隊列來實 ...
  • 概念 執行環境(Execution context,簡稱EC)或執行上下文對象(後面統一用執行上下文表示),它定義了變數或者函數有權訪問的其他數據,決定了他們各自的行為。是不是有點不好理解,那我先簡單翻譯下: js代碼執行時所在的環境。繼續後面 在JavaScript中執行環境分三種: 執行上下文棧 ...
  • ES6 強制開啟嚴格模式 作用域 var 聲明局部變數,for/if花括弧中定義的變數在花括弧外也可訪問 let 聲明的變數為塊作用域,變數不可重覆定義 const 聲明常量,塊作用域,聲明時必須賦值,不可修改 解構賦值 使用場景 變數交換 獲取多個函數值 獲取多個函數返回值 對象解構賦值 獲取js ...
  • 實現效果: 實現原理: 技術棧: javascript+jQuery+html+css 實現步驟: // 0. 獲取元素 // 1. 滑鼠放置到輪播圖上,顯示兩側的控制按鈕,移開後隱藏 // 2. 為兩側控制按鈕綁定事件(調用同一個方法,只有一個參數,true為正向旋轉,false為反向旋轉) 實現 ...
  • print() 方法用於列印當前視窗的內容,支持部分或者整個網頁列印。 調用 print() 方法所引發的行為就像用戶單擊瀏覽器的列印按鈕。通常,這會產生一個對話框,讓用戶可以取消或定製列印請求。 win10下測試ie11、chrome、firefox、360、edge 都可以成功去掉頁眉頁腳; ...
  • 哎哎 1、滑鼠移進網頁里,不見了= = 2、簡單的文字模糊效果 3、多重邊框 4、實時編輯CSS 5、CSS中簡單運算 6、border-radius 因為基本上很多人都是這麼用的: 稍微高端一點的是這樣的: v v 然而,終極黑科技是這樣用的: border-radius 它可以賦8個值:斜線前面 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...