时尚的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中Transform动画属性用法详解
Jul 04 HTML / CSS
CSS3 简单又实用的5个属性
Mar 04 HTML / CSS
基于css3仿造window7的开始菜单
Jun 17 HTML / CSS
浅谈CSS3动画的回调处理
Jul 21 HTML / CSS
CSS3的 fit-content实现水平居中
Sep 07 HTML / CSS
详解CSS3+JS完美实现放大镜模式
Dec 03 HTML / CSS
HTML5实现WebSocket协议原理浅析
Jul 07 HTML / CSS
HTML5 history新特性pushState、replaceState及两者的区别
Dec 26 HTML / CSS
canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动
Jan 10 HTML / CSS
data:image data url 文件转为Blob上传后端的方法
Jul 16 HTML / CSS
background-position百分比原理详解
May 08 HTML / CSS
详解flex:1什么意思
Jul 23 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
用DBSQL类加快开发MySQL数据库程序的速度
2006/10/09 PHP
克隆一个新项目的快捷方式
2013/04/10 PHP
PHP 过滤页面中的BOM(实现代码)
2013/06/29 PHP
Yii基于数组和对象的Model查询技巧实例详解
2015/12/28 PHP
PHP 7.1中AES加解密方法mcrypt_module_open()的替换方案
2017/10/17 PHP
Laravel基础-关于引入公共文件的两种方式
2019/10/18 PHP
jquery 简短右键菜单 多浏览器兼容
2010/01/01 Javascript
jquery对table中各数据的增加、保存、删除操作示例
2014/05/14 Javascript
javascript获取四位数字或者字母的随机数
2015/01/09 Javascript
jQuery数据缓存用法分析
2015/02/20 Javascript
Jquery实现动态切换图片的方法
2015/05/18 Javascript
微信小程序富文本渲染引擎的详解
2017/09/30 Javascript
详解layui中的树形关于取值传值问题
2018/01/16 Javascript
微信小程序按钮去除边框线分享页面功能
2018/08/27 Javascript
vue插件draggable实现拖拽移动图片顺序
2018/12/01 Javascript
vue框架下部署上线后刷新报404问题的解决方案(推荐)
2019/04/03 Javascript
vue服务端渲染操作简单入门实例分析
2019/08/28 Javascript
vue跳转方式(打开新页面)及传参操作示例
2020/01/26 Javascript
antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作
2020/08/06 Javascript
nuxt 路由、过渡特效、中间件的实现代码
2020/11/06 Javascript
[00:02]DOTA2新版本使用PA至宝后暴击展示
2014/11/19 DOTA
[48:00]完美世界DOTA2联赛循环赛 Forest vs Inki BO2第二场 11.04
2020/11/04 DOTA
Python 错误和异常小结
2013/10/09 Python
Python Web框架Flask中使用百度云存储BCS实例
2015/02/08 Python
使用python脚本实现查询火车票工具
2018/07/19 Python
python远程调用rpc模块xmlrpclib的方法
2019/01/11 Python
详解pandas库pd.read_excel操作读取excel文件参数整理与实例
2019/02/17 Python
Python3 操作 MySQL 插入一条数据并返回主键 id的实例
2020/03/02 Python
分享unittest单元测试框架中几种常用的用例加载方法
2020/12/02 Python
2014年应届大学生毕业自我鉴定
2014/01/31 职场文书
2014年五四青年节活动方案
2014/03/29 职场文书
信用社主任竞聘演讲稿
2014/05/23 职场文书
校庆活动策划方案
2014/06/05 职场文书
公司向个人借款协议书范本
2014/10/09 职场文书
辞职信模板(中英文版)
2015/02/27 职场文书
python批量创建变量并赋值操作
2021/06/03 Python