首頁(yè)

html5動(dòng)效系列二十五:純CSS3響應(yīng)式分頁(yè)插件

藍(lán)藍(lán)設(shè)計(jì)的小編

這次我們要來(lái)看一款純CSS3實(shí)現(xiàn)的響應(yīng)式分頁(yè)插件,對(duì)于分頁(yè)插件,之前我們也分享過(guò)一些,都是基于jQuery分頁(yè)插件。這款CSS3分頁(yè)插件可以完全自定義分頁(yè)條的樣式,包括鼠標(biāo)滑過(guò)時(shí)的背景顏色、頁(yè)碼的數(shù)量以及前后翻頁(yè)的按鈕。

css3-responsive-paging

html5動(dòng)效系列二十四:分享幾款CSS3菜單導(dǎo)航

藍(lán)藍(lán)設(shè)計(jì)的小編

這是一款基于純CSS3的菜單導(dǎo)航,這款菜單非常有個(gè)性,菜單背景是一頁(yè)古老的筆記本紙張,菜單項(xiàng)像是浮動(dòng)的文字一樣嵌入在紙張上。鼠標(biāo)滑過(guò)菜單項(xiàng)時(shí)會(huì)出現(xiàn)不同的背景線條,顯得相當(dāng)可愛(ài)。這款CSS3菜單導(dǎo)航非常適合在個(gè)人博客中使用。

css3-menu-personal

html5動(dòng)效系列二十三:基于HTML5 Canvas的圖表插件Chart.js

藍(lán)藍(lán)設(shè)計(jì)的小編

chart.js是一款基于HTML5 Canvas的圖表插件,chart.js的功能非常強(qiáng)大,它不僅提供了常見(jiàn)的柱形圖、折線圖、餅狀圖,而且還提供了環(huán)形圖、雷達(dá)圖,樣式外觀多樣,圖表的色彩搭配也比較清新。chart.js還有一個(gè)特點(diǎn)就是圖表在初始化的時(shí)候有彈性動(dòng)畫(huà),這也是HTML5 Canvas的一大功勞。

chartjs-html5-canvas

html5動(dòng)效系列二十二:HTML5 Canvas折線圖表和柱形圖表

藍(lán)藍(lán)設(shè)計(jì)的小編

今天要分享的一款HTML5 Canvas圖表應(yīng)用提供了折線圖和柱形圖兩種,這款HTML5圖表在初始化數(shù)據(jù)的時(shí)候有一種漸現(xiàn)的動(dòng)畫(huà),我們可以將這款圖表應(yīng)用在統(tǒng)計(jì)頁(yè)面上。

html5-line-and-column-chart

html5動(dòng)效系列二十一:CSS3 3D旋轉(zhuǎn)下拉菜單

藍(lán)藍(lán)設(shè)計(jì)的小編

這是一款帶有3D動(dòng)畫(huà)的CSS3菜單,該菜單有以下幾個(gè)特點(diǎn):首先是菜單時(shí)基于CSS3的,因此瀏覽器兼容性都還可以;其次這款菜單支持二級(jí)下拉菜單,功能上也基本能滿(mǎn)足大部分開(kāi)發(fā)者;最后這款菜單最大的亮點(diǎn)在于展開(kāi)下拉菜單時(shí),子菜單可以旋轉(zhuǎn)的展開(kāi)和收縮,給人3D的視覺(jué)效果。

html5動(dòng)效系列二十:HTML5 SVG世界地圖 地圖可拖拽和縮放

藍(lán)藍(lán)設(shè)計(jì)的小編

前我們已經(jīng)向大家分享過(guò)一些基于HTML5的地圖應(yīng)用,比如jQuery矢量SVG地圖插件JVectorMap,以及這款HTML5/CSS3帶區(qū)域地圖的聯(lián)系表單。今天要分享的這款HTML5地圖應(yīng)用是一張世界地圖,地圖元素是使用SVG繪制的,并且地圖可以拖拽和局部縮放,效果非常不錯(cuò)。

html5-svg-world-map

html5動(dòng)效系列十九:純CSS3實(shí)現(xiàn)質(zhì)感發(fā)光動(dòng)畫(huà)按鈕

藍(lán)藍(lán)設(shè)計(jì)的小編

之前我們分享過(guò)很多漂亮的網(wǎng)頁(yè)按鈕動(dòng)畫(huà),大家可以移步至CSS3按鈕分類(lèi)下查看各種各樣的CSS3按鈕。這次要分享的這款CSS3按鈕有著質(zhì)感的背景,并且鼠標(biāo)滑過(guò)按鈕時(shí)按鈕邊框還會(huì)發(fā)光,呈現(xiàn)出3D立體的視覺(jué)效果。

pure-css3-texture-shine-button

html5動(dòng)效系列十八:HTML5/CSS3鼠標(biāo)懸停動(dòng)畫(huà)菜單按鈕

藍(lán)藍(lán)設(shè)計(jì)的小編

這次要分享的也是一款不錯(cuò)的CSS3動(dòng)畫(huà)按鈕,當(dāng)我們將鼠標(biāo)滑過(guò)按鈕時(shí),按鈕會(huì)展現(xiàn)不同方式的動(dòng)畫(huà)效果,大家可以具體看看演示。

css3-hover-button-animation

html5動(dòng)效系列十七:HTML5/CSS3鼠標(biāo)懸停動(dòng)畫(huà)菜單按鈕

藍(lán)藍(lán)設(shè)計(jì)的小編

今天要給給位分享一款基于CSS3的鼠標(biāo)懸停動(dòng)畫(huà)菜單按鈕,這款菜單是由一個(gè)個(gè)小按鈕組成,當(dāng)我們將鼠標(biāo)滑過(guò)菜單項(xiàng)時(shí),按鈕上的圖標(biāo)將出現(xiàn)懸浮的動(dòng)畫(huà)。

html5動(dòng)效系列十六:炫酷的CSS3 3D旋轉(zhuǎn)按鈕對(duì)話框

藍(lán)藍(lán)設(shè)計(jì)的小編

這次還是要分享一款CSS3對(duì)話框插件,另外,這款對(duì)話框的特點(diǎn)是點(diǎn)擊按鈕后對(duì)話框會(huì)以3D旋轉(zhuǎn)的動(dòng)畫(huà)展現(xiàn)出來(lái)。更令人驚嘆的是,點(diǎn)擊按鈕的不同部位,對(duì)話框3D旋轉(zhuǎn)的動(dòng)畫(huà)方式也會(huì)不同。

css3-3d-button-dialog

日歷

鏈接

個(gè)人資料

存檔