jQuery CSS3實現環形進度條

2022-07-31 03:42:12 字數 1461 閱讀 7140

原理非常的簡單,在這個方案中,最主要使用了css3的transform中的rotate和css3的clip兩個屬性。用他們來實現半圓和旋轉效果。

先來看其結構。

html

0%

結構非常簡單。這樣的結構,大家一看就清楚。

css

.pie_right 

.right

.pie_right, .right

.mask

實現半圓還是挺簡單的,利用border-radius做出圓角,然後利用clip做出剪下效果,(clip使用方法,詳見站內介紹),mask的部分是為了遮擋外面的容器,致使在視覺上產生圓環的效果:

這樣就可以看到乙個半弧旋轉的效果了。

同樣道理,拼接左半邊圓環,為了讓我們html結構更易懂以後寫js更簡便,我對結構做了一下改造,並作了效果優化:

html

0%

css
.circle 

.pie_left, .pie_right

.left, .right

.pie_right, .right

.pie_left, .left

.mask

效果如下:

ok了,基本上我們的圓環已經實現完成了,下面是加入js效果。

首先,我們需要考慮的是,圓環的轉動幅度大小,是由圓環裡面數字的百分比決定的,從0%-100%,那麼圓弧被分成了每份3.6°;而在180°,也就是50%進度之前,左側的半弧是不動的,當超過50%,左邊的半弧才會有轉動顯示。

那麼,原理明確之後,其jquery**如下(刪除css中的旋轉效果,在js裡重寫):

$(function()  else ;

});});

則,改變mask裡面的span 的數值,我們就會看到最終效果。

這樣我們只要從後台獲取當前流程的進度值,傳給span,那麼我們頁面上就能看到這樣圓環的進度效果啦。

jQuery CSS3實現loading按鈕

button html 結構很簡單,如下 mail 外掛程式中給 button 新增了類 loda btn 和 loda icon 樣式也很簡單,在 loda button.css 檔案中定義,在用的時候,可以按照自己的需要重新編輯 overridable 部分。not overridable 片段...

10 款簡單精美的 jQuery CSS3 表單

下面給大家介紹10款設計簡單但是外觀精美的jquery和css3表單,希望對大家有所幫助。1 發光的html5表單 這是一款非常漂亮的html5登入表單,當表單獲取焦點時,表單四周就會呈現出發光動畫的效果,並不斷地進行顏色漸變 當表單失去焦點時,停止發光。其中顏色漸變的動畫只有基於webkit的瀏覽...

12款經典實用的jQuery CSS3外掛程式

這雖然是一款jquery三維圖表,但卻沒有利用任何css3的屬性,主體的頂部 中間部分 底部三部分組成。這是一款基於純css3實現的3d白色按鈕,按鈕的樣式就像牛奶一樣,3d效果非常突出。用js實現人物跑步動畫其實比較簡單,就是通過多張跑步組合起來形成跑步的動畫特效。這是一款很酷的密碼強度驗證登入表...