7個效果酷炫的HTML5滑鼠動畫

2021-01-19 HTML5cn

　　今天分享一些有趣的HTML5滑鼠動畫，當我們移動滑鼠時，頁面上將會出現一些神奇的動畫特效。當然這些動畫可能在實際應用中並不太會使用到，但是對大家研究HTML5和CSS3的幫助應該會非常大。本文分享的7個HTML5滑鼠動畫都提供原始碼下載，都是一些不錯的資源。（註：所有效果附帶演示及源碼，下載請到HTML5中國官網 http://www.html5cn.org/article-9115-1.html，也可點擊最下面【閱讀原文】查看）


　　1、HTML5鯨魚動畫


　　今天我找到了基於HTML5的鯨魚動畫，鯨魚會隨著滑鼠的移動而遊動，畫面非常立體，鯨魚也超級逼真。真的，HTML5確實很給力，HTML5動畫完全可以完成flash能做的事情。

　　


　　2、JavaScript滑鼠跟隨星星飄落動畫


　　今天我們要來分享一款有趣的JavaScript動畫，這種滑鼠跟隨動畫應該也是很早就有的東西，特別是應用在一些個性化的個人博客中。這款JavaScript滑鼠跟隨動畫是一些飄落的星星，星星的形狀和顏色也是隨機變化的，非常可愛。

　　


　　3、HTML5夢幻特效 可給任意元素添加魔幻效果


　　我們來換一種風格，來分享一款看起來比較魔幻的HTML5特效。它可以給網頁上任意元素(圖片、文字等)添加這麼一種效果，即滑鼠滑過時，元素上就會出現非常魔幻的動畫特效，什麼特效呢?你可以點開demo連結查看。

　　


　　4、HTML5 Canvas煙花動畫 可控制煙花速度和大小


　　這個HTML5煙花動畫是基於canvas的，可以說是之前分享那款的升級版，它可以控制煙花上升的速度和煙花綻放花朵的大小。由於是在HTML5 Canvas畫布上完成，因此也就非常靈活。

　　


　　5、HTML5火球擋板碰撞動畫遊戲


　　今天我們要再來分享一款超酷的HTML5火球擋板碰撞動畫遊戲。屏幕上有一個火球在不停的運動，你可以移動滑鼠滑動屏幕下方的擋板，火球碰撞到擋板後，即可反彈出去，這是個很有特色的HTML5遊戲。

　　


　　6、HTML5實現圖形擠壓變形動畫


　　今天我們要來分享一款很特別的HTML5動畫特效，它是一款圖形擠壓動畫。滑鼠移動小球，該小球會和周圍的幾個小球產生擠壓效果，從而使受擠壓的小球產生相應的變形，利用HTML5是這個擠壓變形的特效顯得非常逼真，一起來玩玩吧。

　　


　　7、HTML5 Canvas火焰閃爍動畫 火焰跟隨滑鼠


　　今天我們來分享一款HTML5火焰閃爍動畫，也是基於Canvas的，火焰上下竄動的效果非常逼真，並且，火焰可以跟隨滑鼠移動，是一款非常炫的HTML5 Canvas動畫。

　　


　　看完以上這7個HTML5滑鼠動畫，是不是覺得HTML5非常強大?的確，很多動畫我們都基於HTML5 Canvas來創建，所以我們需要對Canvas畫布有一定的認知和了解，希望這些HTML5動畫能給大家帶來幫助。

　　來源：碼農網 – 小峰

HTML5中國聯繫方式

商務合作QQ：2601929995

HTML5技術交流群：424839972

投稿郵箱：xiaoxiao@html5cn.org

點擊【閱讀原文】下載以上動畫效果源碼

相關焦點

  • 7 個讓人驚嘆的 HTML5 滑鼠動畫
    當然這些動畫可能在實際應用中並不太會使用到，但是對大家研究HTML5和CSS3的幫助應該會非常大。本文分享的7個HTML5滑鼠動畫都提供原始碼下載，都是一些不錯的資源。它可以給網頁上任意元素（圖片、文字等）添加這麼一種效果，即滑鼠滑過時，元素上就會出現非常魔幻的動畫特效，什麼特效呢？你可以點開demo連結查看。
  • 11款效果驚豔的HTML5動畫應用
    今天要分享的有很多效果驚豔而且好玩的HTML5動畫應用，特別是一些HTML5遊戲更加令人眼前一亮，希望大家會喜歡。 1、HTML5 Canvas火焰噴射動畫效果 還記得以前分享過的一款HTML5煙花動畫HTML5 Canvas煙花特效，今天我們要來分享一款類似的HTML5動畫效果，一款基於HTML5 Canvas火焰噴射動畫。
  • 炫酷實用的10個HTML5動畫應用
    這次要給大家分享的是一款效果很酷的CSS3進度條動畫應用，之前也有介紹過不少jQuery/CSS3/HTML5的進度條插件，比如HTML5 Canvas彩色像素進度條動畫、jQuery動畫進度條 實時顯示進度百分比等。今天介紹的這款CSS3進度條的背景色是漸變的，非常具有立體的視覺效果，並且進度在滾動時可以實時顯示當前進度百分比。
  • 十大酷炫屌的圖像懸停動畫特效
    本文阿寶哥將給大家介紹十個 「「酷炫屌"」 的圖像懸停效果，希望阿寶哥精心錄製的十個
  • 8款HTML5動畫實例
    圖片縮略圖按網格的布局一行行排列，你只需點擊按鈕即可讓這些圖片出現不可思議的動畫效果，值得一看。由於是3D的效果，所以圖表的折線也和其他折線圖表的不同。我們可以點擊左右翻頁按鈕進行翻頁，也可以使用滑鼠拖拽頁腳來實現翻頁動畫。
  • 9款令人驚嘆的HTML5 3D動畫應用
    1、HTML5鯨魚動畫 又一款超酷HTML5動畫之前看到過同樣效果的一款鯨魚動畫，不過可惜的是那個動畫是用flash製作的。今天我找到了基於HTML5的鯨魚動畫，鯨魚會隨著滑鼠的移動而遊動，畫面非常立體，鯨魚也超級逼真。真的，HTML5確實很給力，HTML5動畫完全可以完成flash能做的事情。
  • 適合初學者的10個HTML5入門教程
    使用 HTML5 和 CSS3 創建一個下拉導航菜單http://www.ourtuts.com/create-a-drop-down-navigation-menu-with-html5-and-css3/了解如何使用新的 HTML5 標籤和 CSS3 創建一個簡單又時尚的下拉菜單。3.
  • 讓人心動的jQuery插件和HTML5動畫(附原碼)
    這款HTML5電吉他不僅可以滑鼠滑過琴弦發出音樂聲，而且可以利用鍵盤來彈奏出美妙的樂章，懂音律的朋友可以彈奏一下試試。，和之前分享的CSS3 Loading動畫應用不同的是，這款Loading動畫是基於jQuery的，意味著兼容性更好；還有就是這款Loading動畫是可以自定義參數的，比如半徑、旋轉速度等都可以通過右側的滑杆來設置。
  • 學會這8種PPT動畫效果,小白也能做出酷炫效果!
    最近看過一些PPT設計師用PPT設計出的PPT動畫效果，真的很酷炫。
  • (圖文版)C4D野教程:教你輕鬆製作酷炫的金屬文字變形動畫
    來吧，今天我們就用TP粒子做一個酷炫的金屬文字變形動畫吧！：再將得到的對象全選，滑鼠右鍵連接對象加刪除：另外一個文字對象也是同樣的道理，我就不重複了，這裡我把好奇這個文字多複製了一份出來：還有一點需要額外說一下，連接出來的三個文字對象一定要它們歸到坐標原點，這一點很重要：將幀速率改為25幀，做200
  • html5換行符元素:元素
    基本概念html5中的<br>元素用於產生一個換行符，它的名稱br正是單詞break的前兩個字母；break本身的含義為「打破、拆分」，在此處就引申為換行的意思。為什麼html5要專門定義一個元素來代表換行符呢？我們平常在辦公軟體中編輯文本的時候，如果要換行不是只要按下回車鍵就可以了嗎？
  • PPT還能做出電影效果?這幾個技巧讓你的PPT大變樣!
    其實PPT中的一些小功能就能做到，今天我們就給大家分享三個比較有意思的PPT技巧，能夠讓你的PPT「炫酷」起來！第一個技巧：製作酷炫粉筆字效果我們經常需要給幻燈片當中的文字和形狀添加各種各樣的效果，讓我們的PPT幻燈片顯得高級酷炫一些，那麼今天我就來教大家一種製作粉筆字文字效果的小技巧。
  • 看似高大上的「滑鼠經過動畫」,居然可以這樣實現!
    老師你好，我想問ppt能不能做到滑鼠移過時出現動畫效果？（不是切換）零點多了還在琢磨PPT，你說拼不拼？這樣設置之後，就形成了這麼個條件準則：如果滑鼠經過第一頁的雲形圖標，則跳轉到第二頁。現在效果基本實現了，但還有個BUG，那就是當我們移開滑鼠時，按照交互的常識，天氣圖標應該恢復到初始的無發光、無文字狀態，可是由於頁面已經切換到第二頁了，所以發光和文字就一直都擺那兒了。
  • AE動畫-緩動數值的效果應用
    1、打開軟體AE，新建一個合成項目-參數如下圖所示2、在圖層區域新建一個形狀圖層，並在圖層組件中添加形狀和漸變樣式，並進行調整-3、設置好基本造型後，開始進行基本的動畫效果編輯，這裡我們簡單製作一個漸變圓形的擴展縮放效果
  • CSGO:幾種有特殊動畫效果的刀具,蝴蝶刀太酷了
    蝴蝶刀應該是遊戲裡比較經典的一款匕首系列，官方就專門為這把武器做了一段額外的切換動畫。蝴蝶刀有兩種切刀的特殊動畫，一種是從摺疊狀態將刀刃甩出，動作看上去非常酷炫。另一種就是先將刀柄的一部分甩出，然後抓出刀柄露出刀鋒。第二種動畫觸發的機率較小，不過觀賞效果很好就是了。
  • 滑鼠彩色軌跡動畫
    然而，這個方法有一些問題，而且非常不靈活，所以我最終著手製作一個更好的版本，跟蹤所有活動點並單獨對其進行動畫處理。也許有點複雜，但手工操作可以進行更多的定製，而不會顯著降低性能。新版本的工作原理是跟蹤數組中的所有可見點，並在每個（requestAnimation）幀上更新所有可見點：
  • 手把手教你繪製3個效果酷炫的GIF動畫效果
    今天來一點簡單好玩的動畫教程，包括常見的Loading 動畫、煙花動畫和摩天輪旋轉動畫，操作不難，附有PS時間軸的入門手冊，適合新人練習。
  • PPT當中那些不為人知的5個經典動畫效果!
    如下圖所示，我們點擊相應的圖片，畫面就能夠切換到這一頁圖片的內容當中，如果你想返回主菜單，只需要向上滾動滑鼠，就可以回到菜單的主界面。配合這樣的動畫效果來展示，就可以讓你的邏輯更加清晰。所以你以為你看到的就只有一個【運營】的圓，實際上後面還有三個你看不到的元素。05延遲動畫很多朋友製作的動畫效果，之所以看起來沒有靈性，做出來的效果很生硬，就是因為沒有給動畫設置延遲效果。
  • 手感舒適 燈光酷炫-雷柏 V30 幻彩RGB遊戲滑鼠
    外觀細節滑鼠的尺寸為127mmX65.5mm，不含線重量約為131g，是一款專為右手設計的大手滑鼠，手型偏小的玩家需要一定的時間去適應。滑鼠外殼大部分都是磨砂材質，進行了啞光噴漆處理，有一定的防汗防油效果。
  • Mouse Bungee滑鼠固線器回歸 馴服你的滑鼠
    Razer為次世代玩家獻上全新設計的Mouse Bungee2011年7月12日，美國加州，卡爾斯巴德——回顧1996年，當時Quake雷神之錘和「火箭跳」就代表了技巧遊戲，還有另一款產品，它幫助玩家保持競技精神以及最佳的滑鼠揮動——它就是Mouse Bungee。