最近心学习了一款用CSS3写出的动画进度条，主要用到了radial-gradient和 linear-grandient来实现一些特殊的效果，使进度条看起来更加炫酷，我之前的项目中几乎没有用到过这些新的CSS3的新属性。下面我就总结一下我自己用过的心德来和大家分享一下，当然啦，主要是为了自己对新知识点的复习与巩固，加深理解，日后发现不对的地方可以及时改正更新。
首先我们先来了解一下，linear-gradient和radial-gradient分别代表的是线性渐变与径向渐变，不同内核的浏览器对其支持情况不同，主要有 Mozilla（Firefox，Flock等）、WebKit（Safari、Chrome等）、Opera（Opera浏览器）、Trident（讨厌的IE浏览器），所以用的时候要加上各浏览器内核的前缀。
语法：
linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )
参数：其共有三个参数，第一个参数表示线性渐变的方向，top 是从上到下、left 是从左到右，如果定义成 left top，那就是从左上角到右下角。第二个和第三个参数分别是起点颜色和终点颜色。你还可以在它们之间插入更多的参数，表示多种颜色的渐变。如图所示：
径向渐变语法：
radial-gradient([[<shape> || <size>] [at <position>]?,| at <position>,]?<color-stop>[,<color-stop>]+);CSS3的径向渐变相对于线性渐变要复杂的多，属性参数也繁多复杂。CSS3径向变中新老语法中的属性参数定义如下：
<position>：主要用来定义径向渐变的圆心位置。此值类似于CSS中background-position属性，用于确定元素渐变的中心位置。如果这个参数省略了，其默认值为“center”。其值主要有以下几种：
- <length>：用长度值指定径向渐变圆心的横坐标或纵坐标。可以为负值。
- <percentage>：用百分比指定径向渐变圆心的横坐标或纵坐标。可以为负值。
- left：设置左边为径向渐变圆心的横坐标值。
- center：设置中间为径向渐变圆心的横坐标值或纵坐标。
- right：设置右边为径向渐变圆心的横坐标值。
- top：设置顶部为径向渐变圆心的纵标值。
- bottom：设置底部为径向渐变圆心的纵标值。
<shape>：主要用来定义径向渐变的形状。其主要包括两个值“circle”和“ellipse”：
- circle：如果<size>和<length>大小相等，那么径向渐变是一个圆形，也就是用来指定圆形的径向渐变
- ellipse：如果<size>和<length>大小不相等，那么径向渐变是一个椭圆形，也就是用来指定椭圆形的径向渐变。
<size>：主要用来确定径向渐变的结束形状大小。如果省略了，其默认值为“farthest-corner”。可以给其显式的设置一些关键词，主要有：
- closest-side：指定径向渐变的半径长度为从圆心到离圆心最近的边；
- closest-corner：指定径向渐变的半径长度为从圆心到离圆心最近的角；
- farthest-side：指定径向渐变的半径长度为从圆心到离圆心最远的边；
- farthest-corner：指定径向渐变的半径长度为从圆心到离圆心最远的角；
如果<shape>设置了为“circle”或者省略，<size>可能显式设置为<length>。表示的是用长度值指定径向渐变的横向或纵向直径长度，并根据横向和纵向的直径来确定径向渐变的形状是圆或者是椭圆。此值不不能负值。
如果<shape>设置了“ellipse”或者省略，<size>可能显式设置为［<length>|<percentage>］。主要用来设置椭圆的大小。第一个值代表椭圆的水平半径，第二个值代表垂直半径。这两个值除了使用<length>定义大小之外还可以使用<percentage>来定义这两半径大小。使用<percentage>定义值是相对于径向渐变容器的尺寸。同样不能为负值。
<color-stop>：径向渐变线上的停止颜色，类似于线性渐变的<color-stop>。径向渐变的为渐变线从中心点向右扩散。其中0%表示渐变线的起始点，100%表示渐变线的与渐变容器相交结束的位置。而且其颜色停止可以定义一个负值。
好了 介绍完这两员大将之后呢，我们开始进入正题，那就是CSS3 进度条动画
老规矩还是先贴代码，并在代码中做注释，这样好理解。你也可以直接将代码拿去测试。<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>css3进度条动画</title>
<style>
body,html{font-size:100%;padding:0;margin:0;}
/*设置整夜页面的背景色*/
body{background:#f9f7f6;color:#404d5b;font-weight:500;font-size:1.05em;font-family:"Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", "FontAwesome", sans-serif;}
</style>
<link rel="stylesheet" type="text/css" href="css/test.css"/>
<script type="text/javascript" src="http://libs.useso.com/js/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
//进度条的主体部分
<div class="htmleaf-container">
<header class="htmleaf-header">
<h1>超炫酷的css3进度条动画 背景色渐变</h1>
</header>
<div style="text-align:center;clear:both;"></div>
<div class="htmleaf-content">
<div class="progress">
<b class="progress_bar">
<span class="progress_text">
Progress:<em>0%</em><!--进度条变动过程中主要是百分数一直在变，所以我们就以这个百分数值来控制整个进度条的变化-->
</span>
</b>
</div>
</div>
<div style="text-align:center;clear:both;margin-top:80px;"></style>
</div>
<script>window.jquery || document.write('<script src="js/jquery-2.1.1.min.js"><\/script>')//如果不存在window.jQuery 这个对象 也就是说没有jquery 就把jquery包含进来</script>
<script>
//定义一些变量
var $progress=$('.progress'),$bar=$('.progress_bar'),$text=$('.progress_text'),percent=0,update,resetColors,speed=200,orange=30,yellow=55,green=85,timer;
resetColors=function(){//设置初始化颜色的方法
$bar.removeClass('progress_bar--green').removeClass('progress_bar--yellow').removeClass('progress_bar--orange').removeClass('progress_bar--blue');
$progress.removeClass('progress--complete');
};
update=function(){
timer=setTimeout(function(){
percent+=Math.random()*1.8;//percent的值得随机增加值
percent=parseFloat(percent.toFixed(1)); //转化为四舍五入的浮点型数值
$text.find('em').text(percent+'%');
//判断当前percent的值，添加不同的样式类
if(percent>=100){
percent=100;
$progress.addClass('progress--complete');
$bar.addClass('progress_bar--blue');
$text.find('em').text('Complete');
}else{
if(percent>=green){
$bar.addClass('progress_bar--green');
}else if(percent>=yellow){
$bar.addClass('progress_bar--yellow');
}else if(percent>=orange){
$bar.addClass('progress_bar--orange');
}else{
$bar.add('progress_bar');
}
//speed 速度值也是生成的随机数
speed=Math.floor(Math.random()*900);
update();
}
$bar.css({width:percent + '%'});
},speed);
};
setTimeout(function(){
$progress.addClass('progress--active');
update();
},1000);
//鼠标点击后初始化进度条状态
$(document).on('click',function(e){
percent=0;
clearTimeout(timer);
resetColors();
update();
});
</script>
</body>
</html>
1 body,html{font-size:100%;padding:0;margin:0; color:white; padding:20px 50px;background:#131c23; font-family:Roboto;}
2 *,*:after,*:before{
3 -webkit-box-sizing:border-box;
4 -moz-box-sizing:border-box;
5 box-sizing:border-box;
6 }
/*设置包含进度条的容器水平居中*/
7 .htmleaf-container{
8 margin:0 auto;
9 text-align:center;
10 overflow:hidden;
11 }
12 .htmleaf-content{
13 font-size:150%;
14 padding:1em 0;
15 }
16 .htmleaf-header{
17 padding:1em 190px 1em;
18 letter-spacing:-1px;
19 text-align:center;
20 }
21 .htmleaf-header h1{
22 font-weight:600;
23 font-size:2em;
24 line-height:1;
25 margin-bottom:0;
26 font-family:"Segoe UI","Lucida Grande",Helvetica,Arial,"Microsoft YaHei",FreeSans,Arimo,"Droid Sans","wenquanyi micro hei","Hiragino Sans GB","Hiragino Sans GB W3", "FontAwesome", sans-serif;
27 }
28 .progress{
29 font-size:1.2em;
30 height:20px;
31 background:rgba(255,255,255,0.05);
32 border-radius:2px;
33 border:1px solid rgba(255,255,255,0.2);
34 }
35 .progress_bar{
36 color:white;
37 font-size:12px;
38 font-weight:normal;
39 text-shadow:0 1px 1px rgba(0,0,0,0.6);
40 line-height:19px;
41 display:block;
42 position:relative;
43 top:-1px;
44 left:-1px;
45 width:0%;
46 height:100%;
47 opacity:1;
48 border:1px solid ;
49 border-radius:2px 0 0 2px;
50 background-size:100px 30px ,130px 30px ,130px 30px;
51 background-position:-20% center,right center,left center;
52 background-repeat:no-repeat,no-repeat,no-repeat;
53 -webkit-transition:opacity 0.2s ease ,width 0.8s ease-out,background-color 1s ease,border-color:0.3s ease,box-shadow 1s ease;
54 transition:opacity 0.2s ease ,width 0.8s ease-out, background-color 1s ease,border-color 0.3s ease,box-shadow 1s ease;
55 -webkit-animation:pulse 2s ease-out infinite;
56 animation:pulse 2s ease-out infinite;
57 background-color:rgba(201,4,20,0.95);
58 background-image:-webkit-linear-gradient(0deg,rgba(226,4,22,0) 10%),rgba(250,6,26,0.8) 30%,#fb1f31 70%,rgba(250,6,26,0.8) 80%,rgab(226,4,22,0) 90%),-webkit-linear-gradient(left,rgba(251,31,49,0) 0%, #fb1f31 100%),-webkit-linear-gradient(right ,rgba(251,31,49,0) 0%,#fb1f31 100%);
59 background-image:linear-gradient(90deg ,rgba(226,4,22,0) 10%,rgba(250,6,26,0.8) 30%,#fb1f31 70%,rgba(250,6,26,0.8) 80%,rgba(226,4,22,0) 90% ),linear-gradient(to right,rgba(251,31,49,0) 0%,#fb1f31 100%),linear-gradient(to left ,rgba(251,31,49,0) 0% ,#fb1f31 100%);
60 border-color:#fb3848;
61 box-shadow:0 0 0.6em #fa061a inset,0 0 0.4em #e20416 inset,0 0 0.5em rgba(201,4,20,0.5),0 0 0.1em rgba(254,206,210,0.5);
62 }
63 .progress_bar--orange{
64 background-color:rgba(201,47,0,0.95);
65 background-image:-webkit-linear-gradient(0deg,rgba(227,52,0,0) 10%,rgba(252,59,0,0.8) 30%,#ff4d17 70%,rgba(252,59,0,0.8) 80%,rgba(252,59,0,0.8) 80%,tgba(227,53,0,0) 90%),-webkit-linear-gradient(left,rgba(255,77,23,0) 0%,#ff4d17 100%),-webkit-linear-gradient(right,rgba(255,77,23,0) 0%,#ff4d17 100%);
66 background-image:linear-gradient(90deg,rgba(227,53,0,0) 10%,rgba(252,59,0,0.8) 30%,#ff4d17 70%,rgba(252,59,0,0.8) 80%,rgba(252,59,0,0.8) 80%,rgba(227,53,0,0) 90%),linear-gradient(to right,rgba(255,77,23,0) 0%,#ff4d17 100%),linear-gradient(to left,rgba(255,77,23,0) 0% ,#ff4d17 100%);
67 border-color:#ff6030;
68 box-shadow:0 0 0.6em #fc3b00 inset,0 0 0.4em #e33500 inset,0 0 0.5em rgba(201,47,0,0.5),0 0 0.1em rgba(255,214,201,0.5);
69 }
70 .progress_bar--yellow {
71 background-color: rgba(232, 158, 0, 0.95);
72 background-image: -webkit-linear-gradient(0deg, rgba(255, 174, 2, 0) 10%, rgba(255, 183, 28, 0.8) 30%, #ffbf36 70%, rgba(255, 183, 28, 0.8) 80%, rgba(255, 174, 2, 0) 90%), -webkit-linear-gradient(left, rgba(255, 191, 54, 0) 0%, #ffbf36 100%), -webkit-linear-gradient(right, rgba(255, 191, 54, 0) 0%, #ffbf36 100%);
73 background-image: linear-gradient(90deg, rgba(255, 174, 2, 0) 10%, rgba(255, 183, 28, 0.8) 30%, #ffbf36 70%, rgba(255, 183, 28, 0.8) 80%, rgba(255, 174, 2, 0) 90%), linear-gradient(to right, rgba(255, 191, 54, 0) 0%, #ffbf36 100%), linear-gradient(to left, rgba(255, 191, 54, 0) 0%, #ffbf36 100%);
74 border-color: #ffc74f;
75 box-shadow: 0 0 0.6em #ffb71c inset, 0 0 0.4em #ffae02 inset, 0 0 0.5em rgba(232, 158, 0, 0.5), 0 0 0.1em rgba(255, 248, 232, 0.5);
76 }
77 .progress_bar--green {
78 background-color: rgba(0, 178, 23, 0.95);
79 background-image: -webkit-linear-gradient(0deg, rgba(0, 203, 26, 0) 10%, rgba(0, 229, 30, 0.8) 30%, #00fe21 70%, rgba(0, 229, 30, 0.8) 80%, rgba(0, 203, 26, 0) 90%), -webkit-linear-gradient(left, rgba(0, 254, 33, 0) 0%, #00fe21 100%), -webkit-linear-gradient(right, rgba(0, 254, 33, 0) 0%, #00fe21 100%);
80 background-image: linear-gradient(90deg, rgba(0, 203, 26, 0) 10%, rgba(0, 229, 30, 0.8) 30%, #00fe21 70%, rgba(0, 229, 30, 0.8) 80%, rgba(0, 203, 26, 0) 90%), linear-gradient(to right, rgba(0, 254, 33, 0) 0%, #00fe21 100%), linear-gradient(to left, rgba(0, 254, 33, 0) 0%, #00fe21 100%);
81 border-color: #19ff37;
82 box-shadow: 0 0 0.6em #00e51e inset, 0 0 0.4em #00cb1a inset, 0 0 0.5em rgba(0, 178, 23, 0.5), 0 0 0.1em rgba(178, 255, 188, 0.5);
83 }
84 .progress_bar--blue {
85 background-color: rgba(18, 135, 204, 0.95);
86 background-image: -webkit-linear-gradient(0deg, rgba(20, 151, 227, 0) 10%, rgba(37, 162, 236, 0.8) 30%, #3dacee 70%, rgba(37, 162, 236, 0.8) 80%, rgba(20, 151, 227, 0) 90%), -webkit-linear-gradient(left, rgba(61, 172, 238, 0) 0%, #3dacee 100%), -webkit-linear-gradient(right, rgba(61, 172, 238, 0) 0%, #3dacee 100%);
87 background-image: linear-gradient(90deg, rgba(20, 151, 227, 0) 10%, rgba(37, 162, 236, 0.8) 30%, #3dacee 70%, rgba(37, 162, 236, 0.8) 80%, rgba(20, 151, 227, 0) 90%), linear-gradient(to right, rgba(61, 172, 238, 0) 0%, #3dacee 100%), linear-gradient(to left, rgba(61, 172, 238, 0) 0%, #3dacee 100%);
88 border-color: #54b6f0;
89 box-shadow: 0 0 0.6em #25a2ec inset, 0 0 0.4em #1497e3 inset, 0 0 0.5em rgba(18, 135, 204, 0.5), 0 0 0.1em rgba(225, 242, 252, 0.5);
90 }
91 @keyframes pulse{
92 0%{
93 background-position:-50% center,right center,left center;
94 }
95 100%{
96 background-position:150% center ,right center,left center;
97 }
98 }
99 @-webkit-keyframes pulse{
100 0%{
101 background-position:-50% center ,right center, left center;
102 }
103 100%{
104 background-position:150% center,right center,left center;
105 }
106 }
107 .progress_bar:before,.progress_bar:after{
108 content:'';
109 position:absolute;
110 right:-1px;
111 top:-10px;
112 width:1px ;
113 height:40px;
114 }
/*设置进度条运动时最前面的光标*/
115 .progress_bar:before{
116 width:7px;
117 right:-4px;
118 background:-webkit-radial-gradient(center,ellipse,rgba(255,255,255,0.4) 0%,rgba(255,255,255,0) 75%);
119 background:radial-gradient(ellipse at center,rgba(255,255,255,0.4) 0%,rgba(255,255,255,0) 75%);
120 }
121 .progress_bar:after{
122 background:-webkit-linear-gradient(top,rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 25%,rgba(255,255,255,0.3) 75%,rgba(255,255,255,0) 100%);
123 background:linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 25%,rgba(255,255,255,0.3) 75%,rgba(255,255,255,0) 100%);
124 }
125 .progress--complete .progress_bar{
126 -webkit-animation:none;
127 animation:none;
128 border-radius:2px;
129 }
130 .progress--complete .progress_bar:after,.progress--complete .progress_bar:before {
131 opacity: 0;
132 }
发现自己在表达方面真实欠缺的不知是一点点啊，有些东西自己根本表达不出来，也可能是自己对知识点了解的还是不够清楚。本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
