进度条动画代码免费素材下载 CSS3完成的静态进度条带有以后进度百分比数字显示比照flash绝不逊色

资源魔 26 0
正在网页设计中,想必一个精彩的进度条将会为你的网站削减很多的精彩,一个好的网页设计往往表现正在一些小的细节下面,细节决议了胜利与否。正在此以前也为各人分享了一些对于进度条的设计 ― 让人不能不爱的22个UI进度条设计。有了设计理念以及作品,那咱们怎样用最精彩的办法运用到咱们的网页制造傍边呢﹖明天就为各人分享一个行使css3制造静态进度条和附加jQuery百分比数字显示。其成果比照flash来讲却绝不逊色,有一个粗劣的动画进度条,下面另有以后进度的百分比数字显示,并且还会随着进度条而挪动。置信谋求新鲜的冤家来讲肯定会十分的喜爱倡议正在支持css3的阅读器下预览。

HTML代码
HTML的代码十分简略,只需为进度条提供一个容器就能够了。根本的HTML代码以下:
[code]
<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="//www.jiawin.com">www.jiawin.com</a>)</p>
</div>
[/code]
CSS款式表
接上去是为咱们的进度条界说款式,这里次要运用了CSS3的linear-gradient的突变属性、border-radius的圆角属性、box-shadow的暗影属性等等,来制造出进度条的初步模子。实现进度条的模子后咱们行使animation属性,让进度条开端动起来,就此中的进度条动画设置代码以下:
[code]
.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;
}
[/code]
假如接触了CSS3的冤家,置信年夜少数人对这个属性都比拟相熟了,正在这里大略的阐明一下animation设置的参数:
设置工具所使用的动画称号:loader
设置工具动画的继续工夫:10s
设置工具动画的过渡类型:linear (线性过渡,同等于贝塞尔曲线)
设置工具动画的轮回次数:infinite (有限轮回)
@keyframes loader这个标签属性是用来被animation应用的,界说动画时,简略的动画能够间接应用要害字from以及to,即从一种状态过渡到另外一种状态:
[code]
@keyframes loader {
from {
width: 0%;
}
to {
width: 100%;
}
}
[/code]
上面是完好的CSS代码,各人能够多钻研下,也能够本人修正此中的代码,看看能否制造出愈加风趣的货色来:
[code]
* {
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;
}
}
[/code]
正在这里其实有不少个CSS3的常识点,例如进度条下面的进度提醒的小图标的下方有个小三角形,这个小三角次要是经过制造一个小的正方形,而后行使position来定位,调整好地位后,再经过transform来转换角度,使之终极成为一个三角形。各人能够多多看看外面的一些小细节,关于学习CSS3来讲是颇有协助的。
Javascript
实现了进度条的模子,并且进度条也经过CSS3的界说开端动起来了,那咱们就接上去用jQuery来欠缺咱们的进度条,让他成为一个不论表面仍是心田都很弱小的进度条。嘿嘿…正在这里次要做的是让进度条下面的数字跟着进度而发作变动,从而主观的晓得以后进度条的进度百分比,看上面的代码:
[code]
$(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);
});

});
[/code]
这一步需求留意的是别忘了退出jQuery库,否则就看没有到成果了。
好了,这就是明天为各人分享的进度条,心愿各人喜爱,CSS3真是个好货色……哇哈哈!

标签: CSS3 下载按钮 动态进度条 当前进度

抱歉,评论功能暂时关闭!