css3制作動態進度條以及附加jQuery百分比數字顯示

2024-07-11 08:29:18

字體：大中小

來源：轉載

供稿：網友

在網頁設計中，想必一個精彩的進度條將會為你的網站增添不少的精彩，一個好的網頁設計往往體現在一些小的細節上面，細節決定了成功與否。在此之前也為大家分享了一些關于進度條的設計 ― 讓人不得不愛的22個UI進度條設計。有了設計理念和作品，那我們怎么用最精彩的方法運用到我們的網頁制作當中呢﹖今天就為大家分享一個利用css3制作動態進度條以及附加jQuery百分比數字顯示。其效果對比flash來說卻毫不遜色，有一個精致的動畫進度條，上面還有當前進度的百分比數字顯示，而且還會跟著進度條而移動。相信追求新穎的朋友來說一定會非常的喜歡。

HTML代碼
HTML的代碼非常簡單，只要為進度條提供一個容器就可以了?；镜腍TML代碼如下：

復制代碼

代碼如下:
<div class="wrapper">
<div class="load-bar">
<div class="load-bar-inner" data-loading="0"> <span id="counter"></span> </div>
</div>
<h1>Loading</h1>
<p>Please wait...(By:<a >www.jiawin.com</a>)</p>
</div>

CSS樣式表
接下來是為我們的進度條定義樣式，這里主要運用了CSS3的linear-gradient的漸變屬性、border-radius的圓角屬性、box-shadow的陰影屬性等等，來制作出進度條的初步模型。完成進度條的模型后我們利用animation屬性，讓進度條開始動起來，就其中的進度條動畫設置代碼如下：

復制代碼

代碼如下:
.load-bar-inner {
height: 99%;
width: 0%;
border-radius: inherit;
position: relative;
background: #c2d7ac;
background: linear-gradient(#e0f6c8, #98ad84);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 1px 5px rgba(0, 0, 0, 0.3), 0 4px 5px rgba(0, 0, 0, 0.3);
animation: loader 10s linear infinite;
}

如果接觸了CSS3的朋友，相信大多數人對這個屬性都比較熟悉了，在這里大概的說明一下animation設置的參數：
設置對象所應用的動畫名稱：loader
設置對象動畫的持續時間：10s
設置對象動畫的過渡類型：linear （線性過渡，等同于貝塞爾曲線）
設置對象動畫的循環次數：infinite （無限循環）
@keyframes loader這個標簽屬性是用來被animation使用的，定義動畫時，簡單的動畫可以直接使用關鍵字from和to，即從一種狀態過渡到另一種狀態：

復制代碼

代碼如下:
@keyframes loader {
from {
width: 0%;
}
to {
width: 100%;
}
}

上一篇：高度導致IE6中兩個DIV有3px空隙問題_margin-right/left可解決

下一篇：position替代部分float進行網頁元素定位

發表評論

共有條評論