CSS3 炫酷进度条

最近心学习了一款用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 }
发现自己在表达方面真实欠缺的不知是一点点啊，有些东西自己根本表达不出来，也可能是自己对知识点了解的还是不够清楚。所以看文章的朋友，不要嫌弃，我会努力改进的。
时间： 2024-10-03 23:07:27

CSS3 炫酷进度条的相关文章

HTML5/CSS3超酷进度条 不同进度多种颜色

下面我们来看看实现这款进度条的过程和源码,代码主要由HTML.CSS以及jQuery组成,实现过程也相对比较简单.HTML代码: <div id="wrapper">     <div class="loader-container">           <div class="meter">0</div>           <span class="runner"&g

为你的WordPress博客添加CSS3炫酷读者墙

为你的WordPress博客添加CSS3炫酷读者墙,也就是把你文章的评论最活跃的读者显示在单独的一个页面,先看看效果吧: 1.复制主题的page.php,另存为readerwall.php,然后在其顶部添加代码 1 2 3 4 5 < ?php /* Template Name: Reader wall */ ?> 2.接着改文件下面找到 1 < ?php the_content('');?> 在它的前面添加下面的代码 1 2 3 4 5 6 7 8 9 10 11 12 13 1

Android基础控件——ImageView的自定义，巧用Matrix实现图片不变形的炫酷PK条

前言 在开发中常常会遇到PK条制作,如果在PK条中是纯色的情况下,比较好办,如下:我们通常会设置其权重进行更新两个PK条的进度,实现起来也简单 //更新PkBar宽度比例 private void updateLayoutParams(float ratio) { LinearLayout.LayoutParams paramsLeft = (LinearLayout.LayoutParams) mLeftBar.getLayoutParams(); LinearLayout.LayoutPar

【JavaScript】HTML5/CSS3实现五彩进度条应用

今天要介绍的是一款基于HTML5和CSS3的进度条应用,这款进度条是静态的,仅提供进度条的五彩外观.当然你可以在CSS中动态设置进度值来让其变得动态,一个很好的实现方式是利用jQuery动态改变CSS中的进度值,让进度条实时动起来.具体效果大家可以看演示. 你也可以在这里查看在线演示 接下来我们来分析一下这款进度条的源代码以及实现思路,代码主要由HTML和CSS组成,如果你需要动态改变进度值,也可以自己添加Javascript代码,也是比较简单的. HTML代码: <section class=

js和CSS3炫酷3D相册展示

<!doctype html> <html> <head> <meta charset="UTF"> <title>js和CSS3炫酷3D相册展示</title> <style> *{margin:0;padding:0;} body{background:url(img/bg.jpg);width:100%;height:100%;overflow:hidden;}; h1{width:277;hei

HTML5/CSS3实现五彩进度条应用

今天要介绍的是一款基于HTML5和CSS3的进度条应用,这款进度条是静态的,仅提供进度条的五彩外观.当然你可以在CSS中动态设置进度值来让其变得动态,一个很好的实现方式是利用jQuery动态改变CSS中的进度值,让进度条实时动起来.具体效果大家可以看演示. 你也可以在这里查看在线演示 接下来我们来分析一下这款进度条的源代码以及实现思路,代码主要由HTML和CSS组成,如果你需要动态改变进度值,也可以自己添加Javascript代码,也是比较简单的. HTML代码: <section class=

css3圆形百分比进度条的实现原理

原文地址:css3圆形百分比进度条的实现原理 今天早上起来在查看jquery插件机制的时候,一不小心点进了css3圆形百分比进度条的相关文章,于是一发不可收拾,开始折腾了... 关于圆形圈的实现,想必用2个圆心相同,半径不同的div即可实现.大圆的颜色即为圆形进度条的底色,小圆的颜色即为中间百分比的遮罩颜色白色,还要加上左右2边一边一个半圆,也就是说总共应该有4个div,一个大圆的div中包含3个div,左右一边半个圆,遮罩div处于最上面. 那这里的一边半个圆怎么实现呢?使用css的clip属

jQuery和CSS3炫酷滚动页面内容元素动画特效

jquery-smoove是一款jQuery和CSS3炫酷滚动页面内容元素动画特效插件.该内容元素动画插件在页面滚动到指定位置时,该位置的HTML元素会执行指定的CSS3动画特效,如旋转.翻转.放大缩小等动画特效. 使用Smoove页面滚动元素动画特效插件可以很轻松的制作出各种华丽的CSS3动画效果. 在线演示:http://www.htmleaf.com/Demo/201503021449.html 下载地址:http://www.htmleaf.com/jQuery/Layout-Inter

CSS3时钟式进度条

CSS3时钟式进度条,加载完成时生成一个圆,数字慢慢变成100,适时的显示加载进度.友情提醒,如果预览时网页左下角提示错误,刷新一下就可以看到效果了:实际使用中不会出现这样的问题. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=&