讓你心動的 HTML5 & CSS3 效果【附源碼下載】
這里集合的這組 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)建平滑,易于定制的動畫。
作者:山邊小溪
主站:yyyweb.com 記住啦:)
歡迎任何形式的轉載,但請務必注明出處。













浙公網(wǎng)安備 33010602011771號