css3制做动态性进度条和额外jQuery百分比数据显示

2021-03-11 06:13 jianzhan
在网页页面设计方案中,想必1个精彩的进度条可能为你的网站增加很多的精彩,1个好的网页页面设计方案常常反映在1些小的细节上面,细节决策了取得成功与否。在此以前也为大伙儿共享了1些有关进度条的设计方案 ― 令人迫不得已爱的22个UI进度条设计方案。有了设计方案理念和著作,那大家如何用最精彩的方式应用到大家的网页页面制做之中呢﹖今日就为大伙儿共享1个运用css3制做动态性进度条和额外jQuery百分比数据显示信息。其实际效果比照flash来讲却绝不稍逊,有1个精美的动漫进度条,上面也有当今进度的百分比数据显示信息,并且还会跟随进度条而挪动。坚信追求完美新颖的盆友来讲1定会十分的喜爱。

HTML编码
HTML的编码十分简易,要是为进度条出示1个器皿便可以了。基础的HTML编码以下:

拷贝编码
编码以下:

<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 href="http://www.jiawin.com">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的盆友,坚信大多数数人对这个特性都较为熟习了,在这里大约的表明1下animation设定的主要参数:
设定目标所运用的动漫名字:loader
设定目标动漫的不断時间:10s
设定目标动漫的过渡种类:linear (线形过渡,等同于于贝塞尔曲线图)
设定目标动漫的循环系统次数:infinite (无尽循环系统)
@keyframes loader这个标识特性是用来被animation应用的,界定动漫时,简易的动漫能够立即应用重要字from和to,即从1种情况过渡到另外一种情况:

拷贝编码
编码以下:

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

下面是详细的CSS编码,大伙儿能够多科学研究下,还可以自身改动在其中的编码,看看是不是制做出更为趣味的物品来:

拷贝编码
编码以下:

* {
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: ⑵5px;
top: ⑸0px;
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: ⑷px;
bottom: ⑷px;
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: ⑵5px;
}
to {
left: 323px;
}
}
@-moz-keyframes counter {
from {
left: ⑵5px;
}
to {
left: 323px;
}
}
@-webkit-keyframes counter {
from {
left: ⑵5px;
}
to {
left: 323px;
}
}
@-o-keyframes counter {
from {
left: ⑵5px;
}
to {
left: 323px;
}
}

在这里实际上有许多个CSS3的专业知识点,比如进度条上面的进度提醒的小标志的正下方有个小3角形,这个小3角关键是根据制做1个小的正方形,随后运用position来精准定位,调剂好部位后,再根据transform来变换角度,使之最后变成1个3角形。大伙儿能够多多看看里边的1些小细节,针对学习培训CSS3来讲是很有协助的。
Javascript
进行了进度条的实体模型,并且进度条也根据CSS3的界定刚开始动起来了,那大家就接下来用jQuery来健全大家的进度条,让他变成1个无论表面還是心里都很强劲的进度条。嘿嘿…在这里关键做的是让进度条上面的数据伴随着进度而产生转变,从而客观性的了解当今进度条的进度百分比,看下面的编码:

拷贝编码
编码以下:

$(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);
});
});

这1步必须留意的是别忘了添加jQuery库,要不然就看不见实际效果了。