时尚的CSS3进度条效果


Posted in HTML / CSS onFebruary 22, 2012

时尚的CSS3进度条先看效果图,非常漂亮吧:
时尚的CSS3进度条效果
demo:http://demo.3water.com/js/2012/css3-progress-bars/
英文原文:http://www.red-team-design.com/stylish-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;
}

时尚的CSS3进度条效果
添加颜色,进度条风格:
复制代码
代码如下:

.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;}
}

时尚的CSS3进度条效果
闪烁样式:
复制代码
代码如下:

.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%;}
}

时尚的CSS3进度条效果
发光样式:
复制代码
代码如下:

.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的浏览器下的表现:
时尚的CSS3进度条效果

demo:http://demo.3water.com/js/2012/css3-progress-bars/

HTML / CSS 相关文章推荐
css3实现一个div设置多张背景图片及background-image属性实例演示
Aug 10 HTML / CSS
CSS3 Backgrounds属性相关介绍
May 11 HTML / CSS
CSS3实现的闪烁跳跃进度条示例(附源码)
Aug 19 HTML / CSS
html5 更新图片颜色示例代码
Jul 29 HTML / CSS
HTML5全屏(Fullscreen)API详细介绍
Apr 24 HTML / CSS
HTML5 canvas基本绘图之图形组合
Jun 27 HTML / CSS
H5调用相机拍照并压缩图片的实例代码
Jul 20 HTML / CSS
H5混合开发app如何升级的方法
Jan 10 HTML / CSS
如何让pre和textarea等HTML元素去掉滚动条自动换行自适应文本内容高度
Aug 01 HTML / CSS
html5手机键盘弹出收起的处理
Jan 20 HTML / CSS
详解HTML5如何使用可选样式表为网站或应用添加黑暗模式
Apr 07 HTML / CSS
使用HTML+Css+transform实现3D导航栏的示例代码
Mar 31 HTML / CSS
CSS3 选择器 伪类选择器介绍
Jan 21 #HTML / CSS
CSS3 选择器 属性选择器介绍
Jan 21 #HTML / CSS
CSS3 选择器 基本选择器介绍
Jan 21 #HTML / CSS
CSS3制作日历实现代码
Jan 21 #HTML / CSS
CSS3属性box-shadow使用详细教程
Jan 21 #HTML / CSS
45个非常奇妙的CSS3 特性应用示例
Jan 01 #HTML / CSS
让IE6支持css3,让 IE7、IE8 都支持CSS3
Oct 09 #HTML / CSS
You might like
ThinkPHP关于session的操作方法汇总
2014/07/18 PHP
CodeIgniter记录错误日志的方法全面总结
2016/05/17 PHP
Avengerls vs KG BO3 第二场2.18
2021/03/10 DOTA
javascript中的parseInt和parseFloat区别
2013/07/12 Javascript
JavaScript的setAttribute兼容性问题解决方法
2013/11/11 Javascript
jQuery中DOM树操作之使用反向插入方法实例分析
2015/01/23 Javascript
jQuery操作JSON的CRUD用法实例
2015/02/25 Javascript
JQuery节点元素属性操作方法
2015/06/11 Javascript
JavaScript中style.left与offsetLeft的使用及区别详解
2016/06/08 Javascript
jQuery动态修改字体大小的方法【测试可用】
2016/09/09 Javascript
JavaScript 判断一个对象{}是否为空对象的简单方法
2016/10/09 Javascript
浅谈Node.js:Buffer模块
2016/12/05 Javascript
微信小程序之仿微信漂流瓶实例
2016/12/09 Javascript
Input文本框随着输入内容多少自动延伸的实现
2017/02/15 Javascript
React学习之事件绑定的几种方法对比
2017/09/24 Javascript
浅谈React和Redux的连接react-redux
2017/12/04 Javascript
Parcel 打包示例(React HelloWorld)
2018/01/16 Javascript
vue实现点击关注后及时更新列表功能
2018/06/26 Javascript
node删除、复制文件或文件夹示例代码
2019/08/13 Javascript
[06:24]DOTA2亚洲邀请赛小组赛第三日 TOP10精彩集锦
2015/02/01 DOTA
Python全局变量用法实例分析
2016/07/19 Python
Pipenv一键搭建python虚拟环境的方法
2018/05/22 Python
详解通过API管理或定制开发ECS实例
2018/09/30 Python
利用Django提供的ModelForm增删改数据的方法
2019/01/06 Python
浅析Python 实现一个自动化翻译和替换的工具
2019/04/14 Python
Django CSRF认证的几种解决方案
2020/03/03 Python
浅谈matplotlib.pyplot与axes的关系
2020/03/06 Python
python新手学习可变和不可变对象
2020/06/11 Python
Python3.7安装PyQt5 运行配置Pycharm的详细教程
2020/10/15 Python
利用 Canvas实现绘画一个未闭合的带进度条的圆环
2019/07/26 HTML / CSS
BOSE德国官网:尽探索之力,享音乐之极
2016/12/11 全球购物
Etam俄罗斯:法国女士内衣和家居服网上商店
2019/10/30 全球购物
音乐学专业求职信
2014/07/22 职场文书
学生偷窃检讨书
2014/09/25 职场文书
党支部鉴定意见
2015/06/02 职场文书
婚礼领导致辞大全
2015/07/28 职场文书