html中页⾯的百分⽐数，实现css3动态进度条及jquery百分⽐数
字显⽰_觉唯设计
在⽹页设计中，想必⼀个精彩的进度条将会为你的⽹站增添不少的精彩，⼀个好的⽹页设计往往体现在⼀些⼩的细节上⾯，细节决定了成功与否。在此之前也为⼤家分享了⼀些关于进度条的设计 《 让⼈不得不爱的22个UI进度条设计》。有了设计理念和作品，那我们怎么⽤最精彩的⽅法运⽤到我们的⽹页制作当中呢﹖今天就为⼤家分享⼀个利⽤css3制作动态进度条以及附加jQuery百分⽐数字显⽰。其效果对⽐flash来说却毫不逊⾊，有⼀个精致的动画进度条，上⾯还有当前进度的百分⽐数字显⽰，⽽且还会跟着进度条⽽移动。相信追求新颖的朋友来说⼀定会⾮常的喜欢。
HTML代码
HTML的代码⾮常简单，只要为进度条提供⼀个容器就可以了。基本的HTML代码如下：
Loading
(By:)
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%;
}
}
下⾯是完整的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%;
box shadow怎么设置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%;

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。