這里集合的這組 HTML5 & CSS3 效果，有的是網(wǎng)站開發(fā)中常用的、實用的功能，有的是先進的 Web 技術的應用演示。不管哪一種，這些案例中的技術都值得我們去探究和學習。

　　這里集合的這組 HTML5 & CSS3 效果，有的是網(wǎng)站開發(fā)中常用的、實用的功能，有的是先進的 Web 技術的應用演示。不管哪一種，這些案例中的技術都值得我們去探究和學習。

超炫的 HTML5 粒子效果進度條

　　我喜歡粒子效果作品，特別是那些能夠應用于實際的，例如這個由 Jack Rugile 基于 HTML5 Cavnas 編寫的進度條效果。看著這么炫的 Loading 效果，即使讓我多等一會也無妨：）

 

源碼下載      在線演示

 

使用 CSS3 打造一組質感細膩絲滑的按鈕

　　CSS3 引入了眾多供功能強大的新特性，讓設計和開發(fā)人員能夠輕松的創(chuàng)作出各種精美的界面效果。下面這些發(fā)出閃亮光澤的按鈕，很漂亮吧？把鼠標懸停在按鈕上，還有動感的光澤移動效果。

 

源碼下載      在線演示

 

純 CSS 繪制《辛普森一家》人物頭像

　　一組純 CSS 繪制的《辛普森一家》人物頭像。《辛普森一家》（The Simpsons）是馬特·格勒寧為美國福克斯廣播公司創(chuàng)作的一部動畫情景喜劇。

 

源碼下載      在線演示

 

CSS & jQuery 制作一款漂亮的多彩時鐘

　　大家可能見過各種各樣的時鐘效果，比如多年前非常流行的 Flash 制作的各種新奇的動畫時鐘，現(xiàn)在的 Web 開發(fā)者們又開始應用 CSS3 和 Canvas 等最新技術來實現(xiàn)。

 

源碼下載      在線演示

 

傻眼了！竟然有如此逼真的雨滴效果

　　Rainyday.js 是一個輕量的 JavaScript 庫，利用 HTML5 Canvas 實現(xiàn)雨滴下落在玻璃表面的動畫效果。Rainyday.js 盡可能的模擬現(xiàn)實的雨滴效果，幾乎可以以假亂真了。

 

源碼下載      在線演示

 

HTML5 Canvas 模擬可撕裂布料效果

　　這是一個模擬可撕裂布料效果的 HTML5 Canvas 應用演示，效果逼真。你會看到，借助 Canvas 的強大繪圖和動畫功能，只需很少的代碼就能實現(xiàn)讓您屏息凝神的效果。

 

源碼下載      在線演示

 

SVG 實現(xiàn)一個漂亮的頁面預加載效果

　　展示如何使用 CSS 動畫， SVG 和 JavaScript 創(chuàng)建一個簡單的頁面預加載效果。對于網(wǎng)站來說，這些預載入得畫面提供了一種創(chuàng)造性的方法，使用戶在等待內容加載的時候不會那么無聊。

 

源碼下載      在線演示

 

結合 CSS3 & Canvas 模擬人行走的效果

　　HTML5 和 CSS3 技術給 Web 帶來了新的利器，點燃了 Web 開發(fā)人員的激情。所謂只有想不到，沒有做不到，的確如此。下面給大家分享一個結合 CSS3 & Canvas 模擬人行走的動畫效果。

 

源碼下載      在線演示

 

HTML5 高仿逼真 3D 布料圖案效果

　　HTML5 規(guī)范引進了很多新特性，其中最令人期待的之一就是 Canvas 元素，HTML5 Canvas 提供了通過 JavaScript 繪制圖形的方法，非常強大。下面給大家分享一個 HTML5 Canvas 繪制的 3D 布料圖案效果。

 

源碼下載      在線演示

 

帶有 CSS3 閃亮特效的縮略圖相冊

　　ShineTime 是一個效果非常精致的縮略圖相冊，鼠標懸停到縮略圖的時候有很炫的閃光效果，基于 CSS3 實現(xiàn)，另外縮略圖也會有立體移動的效果。

 

源碼下載      在線演示

 

實現(xiàn)超炫的 Loading（加載）動畫效果

　　SpinKit 是一套網(wǎng)頁動畫效果，包含8種基于 CSS3 實現(xiàn)的很炫的加載動畫。借助 CSS3 Animation 的強大功能來創(chuàng)建平滑，易于定制的動畫。

 

源碼下載      在線演示

 

 

本文鏈接：讓你心動的 HTML5 & CSS3 效果【附源碼下載】

編譯來源：夢想天空 ◆ 關注前端開發(fā)技術 ◆ 分享網(wǎng)頁設計資源