css3制作動態(tài)進(jìn)度條以及附加jQuery百分比數(shù)字顯示

發(fā)布時間：2012-12-13 15:05:03 作者：佚名

今天就為大家分享一個利用css3制作動態(tài)進(jìn)度條以及附加jQuery百分比數(shù)字顯示,其效果對比flash來說卻毫不遜色，有一個精致的動畫進(jìn)度條，上面還有當(dāng)前進(jìn)度的百分比數(shù)字顯示，而且還會跟著進(jìn)度條而移動,需要的朋友可以參考下

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

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

復(fù)制代碼

代碼如下:

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

復(fù)制代碼

代碼如下:

.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的朋友，相信大多數(shù)人對這個屬性都比較熟悉了，在這里大概的說明一下animation設(shè)置的參數(shù)：
設(shè)置對象所應(yīng)用的動畫名稱：loader
設(shè)置對象動畫的持續(xù)時間：10s
設(shè)置對象動畫的過渡類型：linear （線性過渡，等同于貝塞爾曲線）
設(shè)置對象動畫的循環(huán)次數(shù)：infinite （無限循環(huán)）
@keyframes loader這個標(biāo)簽屬性是用來被animation使用的，定義動畫時，簡單的動畫可以直接使用關(guān)鍵字from和to，即從一種狀態(tài)過渡到另一種狀態(tài)：

復(fù)制代碼

代碼如下:

@keyframes loader {
from {
width: 0%;
}
to {
width: 100%;
}
}

下面是完整的CSS代碼，大家可以多研究下，也可以自己修改其中的代碼，看看是否制作出更加有趣的東西來：

復(fù)制代碼

代碼如下:

* {
box-sizing: border-box;
}
html {
height: 100%;
}
body {
background: #efeeea;
background: linear-gradient(#f9f9f9, #cecbc4);
background: -moz-linear-gradient(#f9f9f9, #cecbc4);
background: -webkit-linear-gradient(#f9f9f9, #cecbc4);
background: -o-linear-gradient(#f9f9f9, #cecbc4);
color: #757575;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
text-align: center;
}
h1, p {
padding:0; margin:0;
}
.wrapper {
width: 350px;
margin: 200px auto;
}
.wrapper p a {color:#757575; text-decoration:none;}
.wrapper .load-bar {
width: 100%;
height: 25px;
border-radius: 30px;
background: #dcdbd7;
position: relative;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 2px 3px rgba(0, 0, 0, 0.2);
}
.wrapper .load-bar:hover .load-bar-inner, .wrapper .load-bar:hover #counter {
animation-play-state: paused;
-moz-animation-play-state: paused;
-o-animation-play-state: paused;
-webkit-animation-play-state: paused;
}
.wrapper .load-bar-inner {
height: 99%;
width: 0%;
border-radius: inherit;
position: relative;
background: #c2d7ac;
background: linear-gradient(#e0f6c8, #98ad84);
background: -moz-linear-gradient(#e0f6c8, #98ad84);
background: -webkit-linear-gradient(#e0f6c8, #98ad84);
background: -o-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;
-moz-animation: loader 10s linear infinite;
-webkit-animation: loader 10s linear infinite;
-o-animation: loader 10s linear infinite;
}
.wrapper #counter {
position: absolute;
background: #eeeff3;
background: linear-gradient(#eeeff3, #cbcbd3);
background: -moz-linear-gradient(#eeeff3, #cbcbd3);
background: -webkit-linear-gradient(#eeeff3, #cbcbd3);
background: -o-linear-gradient(#eeeff3, #cbcbd3);
padding: 5px 10px;
border-radius: 0.4em;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 2px 4px 1px rgba(0, 0, 0, 0.2), 0 1px 3px 1px rgba(0, 0, 0, 0.1);
left: -25px;
top: -50px;
font-size: 12px;
font-weight: bold;
width: 44px;
animation: counter 10s linear infinite;
-moz-animation: counter 10s linear infinite;
-webkit-animation: counter 10s linear infinite;
-o-animation: counter 10s linear infinite;
}
.wrapper #counter:after {
content: "";
position: absolute;
width: 8px;
height: 8px;
background: #cbcbd3;
transform: rotate(45deg);
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
left: 50%;
margin-left: -4px;
bottom: -4px;
box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.2), 1px 1px 1px 1px rgba(0, 0, 0, 0.1);
border-radius: 0 0 3px 0;
}
.wrapper h1 {
font-size: 28px;
padding: 20px 0 8px 0;
}
.wrapper p {
font-size: 13px;
}
@keyframes loader {
from {
width: 0%;
}
to {
width: 100%;
}
}
@-moz-keyframes loader {
from {
width: 0%;
}
to {
width: 100%;
}
}
@-webkit-keyframes loader {
from {
width: 0%;
}
to {
width: 100%;
}
}
@-o-keyframes loader {
from {
width: 0%;
}
to {
width: 100%;
}
}
@keyframes counter {
from {
left: -25px;
}
to {
left: 323px;
}
}
@-moz-keyframes counter {
from {
left: -25px;
}
to {
left: 323px;
}
}
@-webkit-keyframes counter {
from {
left: -25px;
}
to {
left: 323px;
}
}
@-o-keyframes counter {
from {
left: -25px;
}
to {
left: 323px;
}
}

在這里其實有很多個CSS3的知識點，例如進(jìn)度條上面的進(jìn)度提示的小圖標(biāo)的下方有個小三角形，這個小三角主要是通過制作一個小的正方形，然后利用position來定位，調(diào)整好位置后，再通過transform來轉(zhuǎn)換角度，使之最終成為一個三角形。大家可以多多看看里面的一些小細(xì)節(jié)，對于學(xué)習(xí)CSS3來說是很有幫助的。
Javascript
完成了進(jìn)度條的模型，而且進(jìn)度條也通過CSS3的定義開始動起來了，那我們就接下來用jQuery來完善我們的進(jìn)度條，讓他成為一個不管外表還是內(nèi)心都很強(qiáng)大的進(jìn)度條。嘿嘿…在這里主要做的是讓進(jìn)度條上面的數(shù)字隨著進(jìn)度而發(fā)生變化，從而客觀的知道當(dāng)前進(jìn)度條的進(jìn)度百分比，看下面的代碼：

復(fù)制代碼

代碼如下:

$(function(){
var interval = setInterval(increment,100);
var current = 0;
function increment(){
current++;
$('#counter').html(current+'%');
if(current == 100) { current = 0; }
}
$('.load-bar').mouseover(function(){
clearInterval(interval);
}).mouseout(function(){
interval = setInterval(increment,100);
});
});

這一步需要注意的是別忘了加入jQuery庫，不然就看不到效果了。

Tag：css3進(jìn)度條 jQuery百分比數(shù)字顯示

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

css3制作動態(tài)進(jìn)度條以及附加jQuery百分比數(shù)字顯示

相關(guān)文章

最新評論

文章分類

大家感興趣的內(nèi)容

最近更新的內(nèi)容