优美的CSS3动画进度条

标签： 前端开发 CSS3 进度条 | 发表时间：2012-01-10 10:44 | 作者：直觉
出处：http://www.kekaku.com

CSS3已经被越来越多地使用在一些项目中了，国内虽然IE6的份额还是很高，但是一些知名的互联网公司在项目权衡下还是会加入一些CSS3的元素，毕竟CSS3可以让我们更加方便的做出一些以前需要有大量的背景图片或者其他资源才能完成的效果，比如圆角、阴影等等。

下面是一个非常优美的CSS3进度条，效果图如下，非常漂亮吧：

demo： htttp://www.kekaku.com/example/css3-progress-bars/

HTML代码：
HTML代码比较简单

<div class="progress-bar blue stripes">
    <span style="width: 40%"></span>
</div>
  1. .progress-bar – 定义进度栏的常规样式。
  2. .blue – 定义进度条的风格，这里是蓝色的
  3. .stripes – 当前进度的动画类型。
  4. span – 填充进度条。内联设置的宽度，0%-100%，进度条的宽度。

CCS代码：

.progress-bar {
        background-color: #1a1a1a;
        height: 25px;
        padding: 5px;
        width: 350px;
        margin: 50px 0;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        -moz-box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;
        -webkit-box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;
        box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;
}
 
.progress-bar span {
        display: inline-block;
        height: 25px;
        width: 200px;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px;
        -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
        -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
        box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
        -webkit-transition: width .4s ease-in-out;
        -moz-transition: width .4s ease-in-out;
        -ms-transition: width .4s ease-in-out;
        -o-transition: width .4s ease-in-out;
        transition: width .4s ease-in-out;
}

添加颜色，进度条风格：

.blue span {
        background-color: #34c2e3;
}
 
.orange span {
          background-color: #fecf23;
          background-image: -webkit-gradient(linear, left top, left bottom, from(#fecf23), to(#fd9215));
          background-image: -webkit-linear-gradient(top, #fecf23, #fd9215);
          background-image: -moz-linear-gradient(top, #fecf23, #fd9215);
          background-image: -ms-linear-gradient(top, #fecf23, #fd9215);
          background-image: -o-linear-gradient(top, #fecf23, #fd9215);
          background-image: linear-gradient(top, #fecf23, #fd9215);
}       
 
.green span {
          background-color: #a5df41;
          background-image: -webkit-gradient(linear, left top, left bottom, from(#a5df41), to(#4ca916));
          background-image: -webkit-linear-gradient(top, #a5df41, #4ca916);
          background-image: -moz-linear-gradient(top, #a5df41, #4ca916);
          background-image: -ms-linear-gradient(top, #a5df41, #4ca916);
          background-image: -o-linear-gradient(top, #a5df41, #4ca916);
          background-image: linear-gradient(top, #a5df41, #4ca916);
}

条纹样式

.stripes span {
        -webkit-background-size: 30px 30px;
        -moz-background-size: 30px 30px;
        background-size: 30px 30px;
        background-image: -webkit-gradient(linear, left top, right bottom,
                                                color-stop(.25, rgba(255, 255, 255, .15)), color-stop(.25, transparent),
                                                color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .15)),
                                                color-stop(.75, rgba(255, 255, 255, .15)), color-stop(.75, transparent),
                                                to(transparent));
        background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
                                                transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
                                                transparent 75%, transparent);
        background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
                                                transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
                                                transparent 75%, transparent);
        background-image: -ms-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
                                                transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
                                                transparent 75%, transparent);
        background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
                                                transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
                                                transparent 75%, transparent);
        background-image: linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
                                                transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
                                                transparent 75%, transparent);            
 
        -webkit-animation: animate-stripes 3s linear infinite;
        -moz-animation: animate-stripes 3s linear infinite;
}
 
@-webkit-keyframes animate-stripes {
        0% {background-position: 0 0;} 100% {background-position: 60px 0;}
}
 
@-moz-keyframes animate-stripes {
        0% {background-position: 0 0;} 100% {background-position: 60px 0;}
}

闪烁样式：

.shine span {
        position: relative;
}
 
.shine span::after {
        content: '';
        opacity: 0;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: #fff;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px;                     
 
        -webkit-animation: animate-shine 2s ease-out infinite;
        -moz-animation: animate-shine 2s ease-out infinite;
}
 
@-webkit-keyframes animate-shine {
        0% {opacity: 0; width: 0;}
        50% {opacity: .5;}
        100% {opacity: 0; width: 95%;}
}
 
@-moz-keyframes animate-shine {
        0% {opacity: 0; width: 0;}
        50% {opacity: .5;}
        100% {opacity: 0; width: 95%;}
}

发光样式：

.glow span {
        -moz-box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;
        -webkit-box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;
        box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;
 
        -webkit-animation: animate-glow 1s ease-out infinite;
        -moz-animation: animate-glow 1s ease-out infinite;
}
 
@-webkit-keyframes animate-glow {
 0% { -webkit-box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;}
 50% { -webkit-box-shadow: 0 5px 5px rgba(255, 255, 255, .3) inset, 0 -5px 5px rgba(255, 255, 255, .3) inset;}
 100% { -webkit-box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;}
 }
 
@-moz-keyframes animate-glow {
 0% { -moz-box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;}
 50% { -moz-box-shadow: 0 5px 5px rgba(255, 255, 255, .3) inset, 0 -5px 5px rgba(255, 255, 255, .3) inset;}
 100% { -moz-box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;}
 }

在不支持css3的浏览器下的表现：

demo： htttp://www.kekaku.com/example/css3-progress-bars/

英文原文： http://www.red-team-design.com/stylish-css3-progress-bars

您可能也喜欢：

O 讓Adobe來告訴你CSS3跟HTML5有多酷 (@mydesy)
數個利用CSS、Flash、Javascript製作的導覽列效果 (@mydesy)
10个强大的免费CSS3工具推荐
23个优秀的HTML5/CSS3教程
推荐10款非常有用的Web设计和开发工具
无觅

相关 [美的 css3 动画] 推荐：

优美的CSS3动画进度条

- - 可咔酷 | 网络杂货铺
CSS3已经被越来越多地使用在一些项目中了，国内虽然IE6的份额还是很高，但是一些知名的互联网公司在项目权衡下还是会加入一些CSS3的元素，毕竟CSS3可以让我们更加方便的做出一些以前需要有大量的背景图片或者其他资源才能完成的效果，比如圆角、阴影等等. 下面是一个非常优美的CSS3进度条，效果图如下，非常漂亮吧：.

CSS3动画-彩虹列表

- 蛋布丁 - 大猫の意淫筆記
昨天在微薄问了个 JScript 的问题, 李振文同学解答了一下,顺便摸过去,发现他的热门文章列表很淫荡. 于是抄袭了一个分享出来,嘿嘿. 要体验的同学可以用 chrome 在俺 blog 侧边里看到. 鼠标移上去的时候一个个亮起来,移走的时候慢慢消失掉. 颜色可以用 Photoshop 拉好渐变取色.

CSS3动画效果-animate.css

- - WEB前端开发
animate.css 是提供炫酷，有趣，跨浏览器css3动画的网站，你可以在高级项目中使用这些效果，为高级浏览器用户提供更好的交互体验. 动画效果包括强调突出，滑块，淡入淡出，放大缩小等等. 你也可以结合jQuery一起使用，例如$(‘.bouncy’).addClass(‘bounceInDown’); 项目主页：http://daneden.me/animate/ git地址：https://github.com/daneden/animate.css 声明: 本文采用 BY-NC-SA 协议进行授权 | WEB前端开发转载请注明转自《CSS3动画效果-animate.css》.

常用CSS3动画效果合集-animate.css

- - 我爱互联网
css是一个比较酷、炫的一个动画合集，很方便在你的项目中使用. 更便于你来寻找CSS的动画效果. 47款惊人的CSS3动画效果. 非常有用的HTML5,CSS3的框架. 10款令人难以相信的CSS3绘图效果. 18个明亮型纯CSS的绘图示例. 什么是HTML5和CSS3. HTML5和CSS3的新特性 (@yixieshi).

10个css3/javascript动画插件/框架

- - ria之家--RIA三部曲：jquery、ext、flex
jquery的一个用的人比较多的动画插件，非常的易用，效果也非常全面. 应该是目前针对transform最为全面的动画库，特点支持3D动画特性：. 非常牛逼的动画效果，文档和demo都很详细，虽然用于实战的场景不多（基于canvas的动画），不过依旧推荐认真看下. 相当不错的小动画库，能够产生大部分css3动画效果，关键是API非常易于理解，比如下面的代码：.

【外刊IT评论网】CSS3的动画特效

- iVane - 外刊IT评论
如果你使用的是火狐浏览器或谷歌浏览器，你会发现在浏览本站时看到的界面会比使用IE6或IE7浏览时要漂亮的多，因为在这些页面上使用了CSS3里某些特效，比如圆角效果(border-radius),阴影效果(box-shadow)等. CSS3比CSS2增加了很多神奇的东西，但由于CSS3标准还比较新，只有少数的现代浏览器支持这些特效，但随着火狐和谷歌浏览器的慢慢普及，相信不久所有的网站都会开始使用CSS3.

animate.css 一些常用的CSS3动画效果

- - 前端观察
大家已经开始在项目中使用一些CSS3动画效果了吧，这让网站在高端浏览器上看起来很上流. animate.css是一个老外做的各种CSS3动画的合集，比较全，也很炫，大家可以参考学习一下. 项目主页： http://daneden.me/animate/. 自定义下载样式： http://daneden.me/animate/build/.

css3 变形

- - 博客园_Ruby's Louvre
CSS3从IE滤镜偷窍过来的创意，但易用性明显提高了许多. 利用这个，我们可以对某个元素进行旋传，缩放，倾斜与位移，并且区分元素类型，无论对块状元素还是内联元素都有效. rotateX(angle) 单独设定 rX 轴的角度. rotateY(angle) 单独设定 rY 轴的角度. rotateZ(angle) 单独设定 rZ 轴的角度.

CSS3 代码生成工具：Create CSS3

- - 我爱水煮鱼
CSS3 具有相当多的新增属性，而且包括阴影、动画、过渡等华丽的效果. 但是由于 CSS3 出来并没有很久，各个浏览器厂商还在开发中，有些属性仍然会带有实验性前缀. 而且类似制作动画、渐变的 CSS3 代码也相当复杂，一旦写错就会导致出现问题. 为此，有人开发了一个生成 CSS3 代码的工具 Create CSS3.

CSS3 文字渐变

- slackware - 前端观察
之前，我们有发表过CSS文字渐变效果，但是其实那并不是纯粹的基于CSS的渐变，它需要一张半透明渐变的png图片. 今天我们将介绍两种使用CSS3实现实现文字的方法. 嗯，只有webkit浏览器支持，请暂时无视其它浏览器. 在《CSS的未来：一些试验性CSS属性》中，我们提到了这个属性，相对于Firefox只能用svg做mask，webkit则灵活很多，图片和css3渐变均可.