主題:30個超棒的SVG動畫展示【上篇】    

刊登時間:2019/5/16 18:01:42    點閱率:100


     



 前端開發人員和設計師一般使用CSS來創建HTML元素動畫。然而,由於HTML在創建圖案,形狀,和其他方面的局限性,它們自然的轉向了SVG,它提供了更多更有趣的能力。借助SVG,我們有更多的方式來創建新的動畫。您可以同時使用內置的SVG動畫功能和CSS3動畫。

 

邊境動畫肖恩·麥卡弗里

只使用CSS製作,當您將鼠標懸停在“HOVER”指令上時,邊框會在文本周圍平滑形成。

彈性SVG側邊欄Nikolay Talanov提供

當您嘗試將側邊拉離側邊時,側邊欄會變得有彈性。一個很好的概念應用於受Material Design啟發的應用程序側欄。

Nikolay Talanov 拉下來刷新

大多數頁面允許您“下拉”頁面以刷新。使用此動畫,當您“釋放”頁面時,“發送”圖標將變為“平面”圖標並釋放到空中。

上的文字動畫漸變帕特里克·楊

這是一個微妙但不容易錯過的移動文本漸變,排版愛好者會喜歡。

心臟動畫尼古拉Talanov

此動畫顯示心臟圖標是如何由兩個圓圈和一個正方形組成的轉換是使用CSS動畫完成的。

讓我們通過jjperezaguinaga 旅行

這是一部動畫,展示了世界各地的城市和熱門旅遊目的地。使用CSS動畫創建移動和變換。

Menu toggle animation by Tamino Martinius

A morphing animation of the hamburger icon turning into a cross icon. See how smooth the transition is between the two objects.

Animated Infographic by Sdras

An awesome animation by Sarah Drasner, powered by GSAP timeline. It is an infographic come to life, made with animation. Use the slider to access the frames from any point.

Rain-Bros don’t like JS by cihadturhan

A unique and funny loop animation depicting the characters’ walk. The movement of the objects in this demo is a combination of SVG and CSS3 animation. The legs use SVG animation while other parts use CSS3 animation.

Clock by Mohamad Mohebifar

在此時鐘中觀察二手的平滑移動,顯示當前時間。動畫完全使用SVG動畫功能製作。

彩虹火箭人克里斯·甘農

一名宇航員用它的彩虹動力噴射包射入太空(?)。使用GSAP Tweenmax插件製作的精彩動畫。

動畫圖標路易吉·德·羅薩

然而,通過這些動畫SVG圖標來檢查他們可以做什麼。創建者使用GSAP進行此操作。

扁平工作區晃山一

動畫演示了平面樣式設計中的工作空間。創建者使用GSAP來製作工作站形成的這個令人敬畏的動畫。

可點擊的動畫圖標哈米甚·威廉姆斯

這是一個很酷的動畫,它使用了snap.svg庫。單擊以查看“已發送”郵件。

 


 

 

熱門文章 :
JQuery應用 : HTML5應用 : CCS3應用 :
  • 使用jQuery & CSS3 製作美麗的照片畫廊(117)


  • 5種風格的jQuery 分頁效果(108)


  • Notyf – 響應式的JavaScript 通知插件!(95)


  • 基於jQuery 實現的精緻作品集圖片導航效果(71)


  • jQuery留言評論發布代碼(64)


  • 基於jQuery 實現動畫內容菜單(62)


  • jQuery移動端雙擊圖片放大特效(62)


  • jQuery浮動廣告橫幅代碼(56)


  • 帶分類和縮略圖顯示的jquery相冊特效(56)


  • 使用jQuery UI 創建簡單的電影搜索應用界面(50)


  • HTML5 SVG卡通水母動畫特效(237)


  • HTML5鼠標跟隨立方體碎片特效(202)


  • HTML5 Canvas大波浪動畫特效(183)


  • HTML5文字跑馬燈動畫特效(156)


  • HTML5 SVG情人節盒子動畫特效(149)


  • HTML5 Canvas流動線條動畫特效(122)


  • HTML5線條照射愛心動畫特效(104)


  • 12個很炫的HTML5 和CSS3 應用示例(67)


  • HTML5繪製彩色圓圈動畫特效(63)


  • HTML5線條像素背景動畫特效(59)


  • CSS3圓點冒泡背景動畫特效(327)


  • Creative CSS Loading Animations(276)


  • CSS3轉盤抽獎動畫特效樣式(221)


  • 純CSS實現帶縮略圖的圖片相冊幻燈片效果(83)


  • CSS技巧:逐幀動畫抖動解決方案(81)


  • 純CSS3聖誕樹雪花飄落動畫特效(71)


  • 純CSS打造的鼠標懸停會顯示邊框和描述的圖片相冊特效(66)


  • 23種漂亮的純CSS導航菜單(65)


  • 經典網頁設計:30個創意的CSS 應用案例(65)


  • 45款高質量的免費(X)HTML/CSS模板(64)


  • 素材資源 : 網頁設計 : 創意欣賞 :
  • SVG的形狀懸停效果 (一)(567)


  • SVG的形狀懸停效果 (二)(126)


  • HTML5三維立體泡沫方塊移動特效(68)


  • 精品資源:40個實用的PSD 貼紙模板《下篇》(64)


  • 創建紋理文本的技巧(63)


  • SVG的形狀懸停效果 (三) (61)


  • 支付信息提交組件網頁模板(57)


  • Sliding Header Layout (二)(56)


  • 3D Shading with Box-Shadows(46)


  • Recreating the “Design Samsung” Grid Loading Effect(43)


  • LightGallery.js – 功能齊全的Lightbox 效果(157)


  • 具有Three.js的交互式排斥效果 (二)(91)


  • 令人稱讚的以辦公環境為背景的網站作品(87)


  • 具有Three.js的交互式排斥效果 (一)(83)


  • 舌尖上的設計!10個美味的餐館和食品網站(82)


  • 20款優秀的國外Mobile App 界面設計案例(76)


  • 絲帶(Ribbon)在網頁設計中應用的20佳案例(61)


  • 20個以矩形元素為特色的創意網站設計作品(59)


  • 20個國外優秀的網頁色彩搭配案例(57)


  • 基於jQuery實現聯想大屏焦點圖切換(52)


  • 50個最優秀的Photoshop 實例教程【文字特效篇】(147)


  • 經典網頁設計:20個值得關注的創意作品集網站示例(140)


  • 【特別推薦】12套精緻的網站和移動應用界面設計素材(99)


  • 激發靈感:26個清爽的藍色調網頁設計作品欣賞(78)


  • 【推薦閱讀】簡單之美:30個極簡主義風格的網站作品(66)


  • 經典網頁設計:15個使用網格系統的精美網站作品(59)


  • 【年度盛宴】2019年排名前20位的CSS 網站作品(59)


  • 太有才了!史上最有創意的404頁面設計集錦(54)


  • 經典回顧——2019年度最佳網頁設計作品出爐【下篇】(51)


  • 15款加速Web開發的JavaScript框架(49)


  • 網頁模板 : 手機模板 : 網路科技 :
  • 照片藝術日誌網頁模板(92)


  • 圖片日誌信息網頁模板(79)


  • SNS分享圖標按鈕網頁模板(68)


  • 歡迎使用TEMPLATED提供的免費響應式網站模板(59)


  • Mountain Slider(50)


  • 個人圖片信息介紹網頁模板(49)


  • 藍色精美風格的品牌家居商城網站模板下載(48)


  • 閃爍暗紅娛樂信息網頁模板(45)


  • 紅色圖片列表網頁模板(41)


  • 黑色標準風格的引導頁模板下載(41)


  • 香脆食品料理響應式網頁模板(83)


  • 圖片相冊展示響應式網頁模板(80)


  • Metro圖片信息展示響應式網頁模板(70)


  • 簡潔產品展示網店響應式網頁模板(64)


  • Fringilla Fermentum Tellus(64)


  • 藝術畫館網頁模板(63)


  • 漢堡餐廳響應式網頁模板(63)


  • 女包商城展示響應式網頁模板(62)


  • 精品餐廳美食展示響應式網站模板(62)


  • 藝術圖片展示響應式網頁模板(62)


  • 15款方便團隊溝通的即時聊天工具(233)


  • 20款你沒聽說過的小眾Web瀏覽器(142)


  • 50款Android 移動應用程序圖標【下篇】(137)


  • 傳說這個是35 個最好用Vue 開源庫(120)


  • 30個超棒的SVG動畫展示【上篇】(100)


  • 50個最實用的Photoshop 實例教程【照片特效篇】(92)


  • 8款Chrome插件讓你的標籤頁更酷炫(87)


  • OverAPI.com – 史上最全的開發人員在線速查手冊(85)


  • Clipboard.js – 現代方式複製文本到剪貼板(51)


  • 20個使用手寫字體的作品欣賞(49)


  •     

    服務電話:0982-450920(亞太)、0905-147856(中華)、0970-755956(台哥大) 陳老師