时尚的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 相关文章推荐
7款设计巧妙的css3飘带状3D立体效果的导航菜单和表单窗口
Feb 04 HTML / CSS
CSS3中box-shadow的用法介绍
Jul 15 HTML / CSS
浅析CSS3中鲜为人知的属性:-webkit-tap-highlight-color
Jan 12 HTML / CSS
CSS3属性 line-clamp控制文本行数的使用
Mar 19 HTML / CSS
HTML5中的postMessage API基本使用教程
May 20 HTML / CSS
HTML5 拖拽批量上传文件的示例代码
Mar 28 HTML / CSS
Html5 Canvas 实现一个“刮刮乐”游戏
Sep 05 HTML / CSS
html5教程调用绘图api画简单的圆形代码分享
Dec 04 HTML / CSS
html5定位并在百度地图上显示的示例
Apr 27 HTML / CSS
小程序瀑布流解决左右两边高度差距过大的问题
Feb 20 HTML / CSS
HTML5单选框、复选框、下拉菜单、文本域的实现代码
Dec 01 HTML / CSS
教你做个可爱的css滑动导航条
Jun 15 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
星际争霸秘籍
2020/03/04 星际争霸
PHP 调试工具Debug Tools
2011/04/30 PHP
Yii2中DropDownList简单用法示例
2016/07/18 PHP
PHP实现登录搜狐广告获取广告联盟数据的方法【附demo源码】
2016/10/14 PHP
ThinkPHP类似AOP思想的参数验证的实现方法
2019/12/18 PHP
PHP程序员简单的开展服务治理架构操作详解(三)
2020/05/14 PHP
javascript 树控件 比较好用
2009/06/11 Javascript
javascript基本数据类型和转换
2017/03/17 Javascript
angularjs的select使用及默认选中设置
2017/04/08 Javascript
JS处理一些简单计算题
2018/02/24 Javascript
vue图片加载失败时用默认图片替换的方法
2019/08/29 Javascript
vue中uni-app 实现小程序登录注册功能
2019/10/12 Javascript
javascript执行上下文、变量对象实例分析
2020/04/25 Javascript
js实现金山打字通小游戏
2020/07/24 Javascript
vue 通过base64实现图片下载功能
2020/12/19 Vue.js
[47:04]EG vs RNG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
Python中使用copy模块实现列表(list)拷贝
2015/04/14 Python
Python实现批量转换文件编码的方法
2015/07/28 Python
python用10行代码实现对黄色图片的检测功能
2015/08/10 Python
整理Python 常用string函数(收藏)
2016/05/30 Python
利用Celery实现Django博客PV统计功能详解
2017/05/08 Python
PyQt5每天必学之拖放事件
2020/08/27 Python
Python实现密钥密码(加解密)实例详解
2020/04/26 Python
OpenCV 之按位运算举例解析
2020/06/19 Python
python中关于数据类型的学习笔记
2020/07/19 Python
8款精美的CSS3表单设计(登录表单/下拉选择/按钮附演示及源码)
2013/02/04 HTML / CSS
CSS3 实现时间轴动画
2020/11/25 HTML / CSS
大学教师年终总结的自我评价
2013/10/29 职场文书
优秀民警事迹材料
2014/01/29 职场文书
个性发展自我评价
2014/02/11 职场文书
意向书范文
2014/03/31 职场文书
七夕相亲活动策划方案
2014/08/31 职场文书
2016年习总书记讲话学习心得体会
2016/01/20 职场文书
总结Python变量的相关知识
2021/06/28 Python
spring cloud 配置中心客户端启动遇到的问题
2021/09/25 Java/Android
前端传参数进行Mybatis调用mysql存储过程执行返回值详解
2022/08/14 MySQL