button html 結構很簡單,如下:
mail
外掛程式中給 button 新增了類 loda-btn 和 loda-icon 。 樣式也很簡單,在 loda-button.css 檔案中定義, 在用的時候,可以按照自己的需要重新編輯
overridable 部分。
not overridable
**片段設定了button的動畫效果,當然不要去改寫。
採用普通的 jquery 風格建立 button,**如下:
var lodabtn = $('#loda-btn').lodabutton();
需要啟用 button, 觸發 icon 動畫,呼叫:
lodabtn.lodabutton('start');
需要停止動畫:
lodabtn.lodabutton('stop');
動畫是通過css3的動畫實現的,包括定義 transitions 和 transforms. 如今,chrome, firefox, opera, 以及 ie10 等現代瀏覽器都支援 css3 動畫。
你可以在 github上 找到 loda-button 的 demo。
jQuery CSS3實現環形進度條
原理非常的簡單,在這個方案中,最主要使用了css3的transform中的rotate和css3的clip兩個屬性。用他們來實現半圓和旋轉效果。先來看其結構。html 0 結構非常簡單。這樣的結構,大家一看就清楚。css.pie right right pie right,right mask 實現...
10 款簡單精美的 jQuery CSS3 表單
下面給大家介紹10款設計簡單但是外觀精美的jquery和css3表單,希望對大家有所幫助。1 發光的html5表單 這是一款非常漂亮的html5登入表單,當表單獲取焦點時,表單四周就會呈現出發光動畫的效果,並不斷地進行顏色漸變 當表單失去焦點時,停止發光。其中顏色漸變的動畫只有基於webkit的瀏覽...
12款經典實用的jQuery CSS3外掛程式
這雖然是一款jquery三維圖表,但卻沒有利用任何css3的屬性,主體的頂部 中間部分 底部三部分組成。這是一款基於純css3實現的3d白色按鈕,按鈕的樣式就像牛奶一樣,3d效果非常突出。用js實現人物跑步動畫其實比較簡單,就是通過多張跑步組合起來形成跑步的動畫特效。這是一款很酷的密碼強度驗證登入表...