程序猿必備的10款超炫酷HTML5 Canvas插件

2021-01-06 智能甄選

1.超炫酷HTML5 Canvas 3D旋轉地球動畫

這是一款基於HTML5 Canvas的3D地球模擬動畫,動畫以太空作為背景,地球在太空中旋轉,同時我們也可以拖拽滑鼠來從不同的角度觀察地球。另外我們也可以通過點擊全屏按鈕來全屏觀看地球旋轉動畫,記得在很早以前我們也分享過一款基於HTML5 Canvas的地球動畫,請看這裡。

2.HTML5 Canvas 3D文字動畫 支持滑鼠滾輪縮放

之前我們已經為大家分享過很多款炫酷和實用的HTML5文字動畫特效,最經典的就是這款HTML5 Canvas幻彩火焰文字特效。這次給大家帶來的是另外一款基於HTML5 Canvas 3D文字動畫,它的特點是按住滑鼠左鍵拖動文字可以旋轉文字,從不同角度觀察文字;按住滑鼠左鍵可以移動文字;另外滑動滑鼠滾輪可以縮放文字大小。

3.HTML5 Canvas五彩煙霧模擬動畫

之前我們利用HTML5技術在Canvas上模擬了很多東西,比如最近剛分享的HTML5 Canvas 多種炫酷3D粒子圖形動畫。這次給大家帶來的也是一款基於HTML5 Canvas的動畫特效,它模擬了五彩煙霧的流動效果,這在Canvas上實現還是比較簡單的。

4.CSS3帶頭像的垂直彩色菜單

今天我們要給大家分享一款比較特別的CSS3菜單,這款菜單是垂直樣式的,而且當滑鼠滑過菜單項時,當前菜單項即可顯示一個精美的頭像,並且在頭像旁邊顯示一些格式化的文字。另外,每一個菜單項的背景色可以動態渲染。

5.HTML5/CSS3 3D立方體拼圖 支持方向鍵旋轉

之前我們分享過不少基於HTML5/CSS3和Canvas的3D立方體旋轉動畫,比如這款超絢麗CSS3多色彩發光立方體旋轉動畫,也有基於立方體做的菜單應用,比如超實用CSS3 3D菜單 菜單項懸浮凸出立體效果。今天我們要分享的是一款基於HTML5和CSS3的3D立方體拼圖應用,一共有8個小立方體組成的3D拼圖,我們可以點擊立方體或者方向鍵完成拼圖,同時我們也可以讓立方體保持旋轉。

6.CSS3/SVG實現的任務列表 超酷的按鈕點擊動畫

這是一款外觀很漂亮的CSS3/SVG任務列表插件,我們可以在輸入框中輸入自己需要完成的任務名稱,點擊添加按鈕後即可將任務添加到列表中去。這本來是一件非常普通的功能,但是利用CSS3和SVG,我們在添加按鈕點擊時出現非常炫酷的動畫特效,這樣的特效在任務添加到列表和刪除列表中都同樣會出現,非常不錯。甚至我們可以將這款插件修改後變成一款非常華麗的評論插件。

7.CSS3水平滑杆插件 帶氣泡數值提示

今天我們要給大家介紹一款很酷的水平滑杆插件,和之前分享的jQuery雙向滑動杆 設置數值百分比和超可愛的純CSS3滑動開關按鈕類似,基本都是通過CSS3來美化瀏覽器默認的水平滑杆。今天分享的這款有一個特點,就是滑杆的數值帶有氣泡提示框,而且它就像氣球一樣拖動時會左右搖晃。

8.CSS3/SVG自定義單選框Radiobox跳躍選擇動畫

這又是一款利用CSS3實現的自定義美化版Radiobox單選框,和之前分享的CSS3自定義發光radiobox單選框類似,這款radiobox也是利用CSS3重寫radiobox樣式實現的。另外,這款自定義單選框還結合了SVG的特性,實現了單選框選中時的跳躍動畫。

9.基於HTML5 WebGL的3D星雲動畫特效

今天我們給大家分享一個基於HTML5 Canvas的星雲動畫特效,整個畫面模擬了一個星系的外觀,比如模擬了太陽系,有很多小行星圍繞著星系中心旋轉,星系中心也顯得格外亮麗。這些小星點都是在Canvas上繪製而成,同時我們還可以拖拽滑鼠從不同視角觀看星雲,非常大氣。

10.jQuery Select下拉框美化插件 菜單淡如淡出動畫

儘管現在的瀏覽器更新換代後更加強大,瀏覽器默認控制項也逐漸變得美觀起來,特別是Select下拉框,已經不再是以前IE6那樣的醜陋了。但是今天我們要為大家分享一款基於jQuery的Select下拉框美化插件,它完全重寫了瀏覽器默認的Select下拉框樣式,而且在下拉菜單展開時還伴隨淡如淡出的動畫效果,非常不錯。當然我們以前也分享過一些類似的插件,可以看看漂亮實用的Select下拉框美化插件Tether,也可以看看這款jQuery 美化界面的下拉框。

本文固定連結: http://www.i7758.com/archives/2866.html

相關焦點

  • HTML5 超炫酷 3D 煙花動畫
    插件簡介今天要為大家展現一款非常絢麗的HTML5 Canvas 3D煙花動畫,和之前分享的這款HTML5製作一場精美的煙花盛宴相比
  • 7款超華麗的HTML5 Canvas文字動畫特效
    本文就總結了7款超華麗的HTML5 Canvas文字動畫特效,可以讓你的頁面更加的活靈活現,充滿夢幻的色彩。1、HTML5 Canvas幻彩火焰文字特效之前我們分享過很多基於HTML5 Canvas的火焰渲染動畫特效,比如這款HTML5 Canvas炫酷的火焰風暴動畫和這個HTML5動感的火焰燃燒動畫特效。
  • 10個超讚的畫布Canvas SVG和CSS3相關的jQuery插件
    10個超讚的畫布Canvas SVG和CSS3相關的jQuery插件 jQuery插件開發絕對是jQuery框架最強大的一個特性。
  • HTML5 Canvas 動畫實例
    圖 5-13 是一個方向(一般都是 4 個方向)的跑步動作序列圖。<canvas id="myCanvas" height=250 width=250>您的瀏覽器不支持 canvas。</canvas><script type="text/javascript">function draw(){ var canvas=document.getElementById("myCanvas"); //獲取網頁中的 canvas 對象 var context = canvas.getContext
  • 推薦十款非常優秀的 HTML5 在線設計工具
    03、Online 3D Sketch Tool地址:http://hakim.se/experiments/html5/sketch/ 這是一款很特別的繪圖工具,使用功能強大的05、Online Velocity Sketch Tool地址:http://jayweeks.com/sketchy-structures-html5-canvas/這是一款基於
  • 程式設計師必備的4款Chrome插件,妥妥的神器!
    ,所以小編就去找了找,發現了這4款當下比較熱門且實用的,也是程式設計師經常用到的,這幾款插件也可以提高工作效率,難怪隔壁小哥哥程式設計師的效率都挺高,估計也用了這幾款插件,下面我們一起來看看吧!  http://www.cnplugins.com/devtool/webqianduanzhushoufehelper/download.htmlFeHelper是一款非常好用的插件,它的功能主要是對於前臺數據的格式化和渲染等操作,比如可以實現對包括Javascript
  • HTML5炫酷體驗:Canvas Video雷人視頻
    今天,大多數視頻是通過插件(比如 Flash)來顯示的。然而,並非所有瀏覽器都擁有同樣的插件。  HTML5 規定了一種通過 video 元素來包含視頻的標準方法。如:<video src="movie.ogg" controls="controls"></video>  Canvas+Video  HTML5中引入新的元素canvas,其drawImage 方法允許在 canvas 中插入其他圖像( img 和 canvas
  • 程式設計師必備的4款Chrome插件,編程神器!
    ,也是程式設計師經常用到的,這幾款插件也可以提高工作效率,難怪隔壁小哥哥程式設計師的效率都挺高,估計也用了這幾款插件,下面我們一起來看看吧!  http://www.cnplugins.com/devtool/webqianduanzhushoufehelper/download.htmlFeHelper是一款非常好用的插件,它的功能主要是對於前臺數據的格式化和渲染等操作,比如可以實現對包括Javascript
  • UI設計師必備的10大谷歌插件(附下載連結)
    今天就為大家分享一波,這些都是與Chrome擴展程序相關的插件,善用各種專為Chrome打造的擴展小插件,能顯著提升Chrome的效能,幫助設計師更快獲取靈感、學習技巧。為方便大家挑選,下面小編將為大家介紹10款親測且超實用的Chrome小插件,希望能對大家有所幫助。
  • 15 個 HTML5 Canvas 應用欣賞
    HTML5呈現了很多的新特性,這在之前的HTML中是不可見到的。其中一個最值得提及的特性就是HTML Canvas,可以對2D或位圖進行動態、腳本的渲染。
  • Blender 2.8玩家必備必備的5款插件!
    /上期更新了5款大神級的Photoshop筆刷本期又為大家帶來了5款Blender 2.8必備使用的插件
  • 超實用:10 款開發必備的 VS Code 插件!
    VS Code 是這兩年非常熱門的一款 IDE,它不僅有提升開發體驗的界面、輕量化的編輯器,還有豐富而強大的插件,這些優秀的插件使得 VS Code 生態體系更加吸引人,讓開發效率大大提升。本文來介紹 10 款高效的 VS Code 插件,總有一款能夠驚豔到你。前言今天,本文就來介紹 10 款高效、好用的插件,能夠讓原本單薄的 VS Code 如虎添翼,開發效率頓時提升到一個新的級別。
  • 10個超實用的設計師專屬Chrome小插件
    善用各種專為Chrome打造的擴展小插件,能顯著提升Chrome的效能,幫助設計師更快獲取靈感、學習技巧。所以,為方便大家挑選,下面小編將為大家介紹10款親測且超實用的Chrome小插件。希望能對大家有所幫助。或許屏幕那邊的你,剛好是一名設計師,並且用著一臺27英寸的5K屏iMac閱讀這篇文章。
  • HTML5之Canvas基礎繪圖教程
    doctype html><html> <head> <meta charset="UTF-8"> </head> <style type="text/css"> canvas{border:dashed 2px #CCC} </style> <script
  • 網頁樣式——各種炫酷效果及實現代碼
    點擊上方「程序人生」,選擇「置頂公眾號」第一時間關注程序猿(媛)身邊的故事
  • 10個最棒的jQuery和HTML所見即所得編輯器插件
    Froala 所見即所得 HTML 編輯器非常易於整合和使用。ContentTools 包由 5 個庫組成,每一個都可以單獨使用,並且該插件易於擴展。特點:壓縮後 49 KB行內編輯可以調整圖片和視頻大小支持 撤銷/重做 (undo/redo)3. Raptor Editor
  • 10個設計師專屬的最佳Chrome小插件
    今天就為大家分享一波,這些都是與Chrome擴展程序相關的插件,善用各種專為Chrome打造的擴展小插件,能顯著提升Chrome的效能,幫助設計師更快獲取靈感、學習技巧。為方便大家挑選,下面小編將為大家介紹10款親測且超實用的Chrome小插件,希望能對大家有所幫助。
  • 熬夜總結了 「HTML5畫布」 的知識點(共10條)
    感謝哪吒的投稿前言html5Canvas的知識點,是開發的必備技能,在實際工作中也常常會涉及到。最近熬夜總結html5Canvas相關的知識點,大家一起看一下吧:1.html5Canvas基礎知識Canvas使用的場景有:1,動畫;2,H5遊戲;3,圖表。
  • 12 款實用 Office 插件總結,讓你工作效率直線飆升
    Excel、PPT、Word 等 Office 套件現在已經成為辦公、學習、生活的必備工具了,現在的電腦也都會默認安裝 Office 套件。EasyShu -1代碼寶插件管理工具微信公眾號:Excel催化劑Excel催化劑製作的一款 Office 插件管理工具,可以查找到電腦上安裝的所有插件
  • 推薦10個免費的HTML編輯器
    下面就為開發者推薦10個免費的HTML編輯器,你可以嘗試使用。更多代碼編輯器,可以參考《為你推薦10款開發常用的代碼編輯器》《"我最喜歡的Linux平臺代碼編輯器」排行榜》《10個免費的在線Markdown編輯器》,希望對你有幫助。 1.