HTML5特效收錄-不定時更新

標籤：style   blog   http   color   io   os   使用   ar   java   

在工作中，我們可能會用到各種互動效果。而這些效果在平常翻看文章的時候碰到很多，但是一時半會又想不起來在哪，所以養成知識整理的習慣是很有必要的。希望能給大大家啟發，並且學習。

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

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

線上示範        源碼下載

 

HTML5/SVG實現過山車動畫

今天我們要分享一款很酷的HTML5/SVG動畫，這款HTML5動畫是過山車效果，主要是利用了SVG的path動畫來實現的，效果非常酷。

線上示範        源碼下載

 

HTML5像素粉碎圖片動畫 圖片灑落一地

這款HTML5圖片動畫特效你絕對想不到，它將一張圖片粉碎成許多像素顆粒，點擊圖片後，這些像素顆粒邊掉落在地上，繼續點擊，粉碎的像素圖片顆粒又會重新組合成完整的圖片。用HTML5技術實現這種圖片粉碎效果還是挺簡單的，有興趣的同學可以下載源碼來學習。

線上示範        源碼下載

 

HTML5 SVG狐狸奔跑動畫 相當大氣

今天我要來向大家分享一款超級酷的HTML5動畫，它是一隻快速奔跑的狐狸，奔跑的動作非常自然逼真，長長的狐狸尾巴也會隨著擺動。另外，這款HTML5狐狸奔跑動畫也是基於SVG的，前面我們也介紹過很多SVG的動畫效果，可見SVG在動畫製作上也有很大的優勢。

線上示範        源碼下載

 

一套HTML5/SVG表情表徵圖 表情超可愛

這次我們要來向大家分享一款超級可愛的HTML5/SVG表情表徵圖，一共有12組不同的表情，這些表情都是利用SVG Path繪製而成，對SVG熟悉的朋友應該覺得比較簡單，但是這些表情的創意確實非常不錯，你可以將這些svg表情應用到你的部落格上去，非常可愛。

線上示範        源碼下載

　

超炫的頁面切換動畫效果

　　今天我們想與大家分享一組創意的頁面切換熊效果集合。我們已經在樣本中羅列了一組動畫，可以被應用到頁面切換過程中，創造出很有趣的導航效果。

線上示範      源碼下載

 

美！視差滾動在圖片滑塊中的應用

　　視差滾動（Parallax Scrolling）已經被廣泛應用於網頁設計中，這種技術能夠讓原本平面的網頁介面產生動感的立體效果。美女很養眼吧 :)

線上示範      源碼下載

 

網頁側邊欄過渡動畫

　　以細微的過渡動畫顯示一些隱藏的側邊欄，其餘的內容也是。通常側邊欄滑入，把其他內容推到一邊。這個可過程中可以加入很多微妙而奇特的效果。

線上示範      源碼下載

 

三種風格的全屏投影片效果

　　這個投影片效果是由四個地區的獨立移動構成，通過畫面分割，同時顯示出新的圖片。這裡需要組合使用 CSS3 的3D轉換、過渡和動畫功能。

線上示範      源碼下載

 

使用 CSS3 實現 3D 圖片滑塊效果

　　使用 CSS3 的3D變換特性，我們可以通過讓元素在三維空間中變換來實現一些新奇的效果。 這篇文章分享的這款 jQuery 立體圖片滑塊外掛程式，利用了 3D transforms（變換）屬性來實現多種不同的效果。

線上示範      源碼下載

 

單元素實現的 CSS 載入進度提示效果

　　之前的文章個大家分享過各種類型的載入效果（Loading Effects），這裡再給大家奉獻一組基於單個元素實現的 CSS 載入動畫集合。這些載入效果都是基於一個 DIV 元素實現的，十分強悍。

線上示範      源碼下載

 

動感的頁面載入動畫效果

　　這個效果的核心是讓一個形狀在頁面視窗中動畫顯示並有展示活動的指示。當新內容被載入時，形狀將以動畫顯示返回顯示的頁面。我們將使用 Snap.svg 動畫庫來實現，因為這個庫讓我們能夠建立複雜的形狀和有趣的變形轉換效果。

線上示範      源碼下載

 

奇特的網格載入效果

　　向您展示了如何使用 Masonry 網格砌體外掛程式，結合 CSS 動畫重現這種效果。另外在這裡，我們還藉助了 ColorFinder 來獲得的映像的最突出的顏色來作為初始的載入背景色使用。

線上示範      源碼下載

 

使用 CSS3 製作網格動畫效果

　　今天我們想與大家分享一個小的動畫概念。這個夢幻般的效果是在馬庫斯·埃克特的原型應用程式裡發現的??。實現的基本思路是對網格項目進行 3D 旋轉，擴充成全屏，並呈現內容。

源碼下載      線上示範

 

超炫的複選框（Checkbox）效果

　　複選框（Checkbox）在各個瀏覽器中的效果不一致，因此很多 Web 開發人員會自己重新設計一套介面和使用體驗都更佳的複選框功能。

線上示範      源碼下載

 

HTML5特效收錄-不定時更新