CSS3制作彩色进度条样式的代码示例分享


Posted in HTML / CSS onJune 23, 2016

一、制作静态的紫色条纹进度条
html代码:

XML/HTML Code复制内容到剪贴板
  1. <body>  
  2. <div class="progress-bar purple"> <span style="width:40%;"></span> </div>  
  3. </body>  

css代码:

CSS Code复制内容到剪贴板
  1. body {   
  2.  background-color:#333;   
  3. }   
  4. .progress-bar {   
  5.  background-color:#222;   
  6.  border-radius:3px;   
  7.  width:300px;   
  8.  height:24px;   
  9.  padding:5px;   
  10.  margin:50px;   
  11.  border-bottom:1px solid #444;   
  12.  box-shadow:inset 0 0 2px 0 #000;   
  13. }   
  14. .progress-bar span {   
  15.  display:inline-block;   
  16.  width:140px;   
  17.  height:24px;   
  18.         border-radius:2px;   
  19.  box-shadow:0 1px 0 rgba(255, 255, 255, 0.5) inset;   
  20.  -moz-box-shadow:0 1px 0 rgba(255, 255, 255, 0.5) inset;   
  21.  -webkit-box-shadow:rgba(255,255,255,0.5) 0 1px 0 inset;   
  22. }   
  23. .purple span{   
  24.  background-color:#F09;   
  25.  background-image:-moz-linear-gradient(45deg, rgba(255, 255, 255, 0.3) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.3) 75%, transparent 75%);   
  26.  background-image:-webkit-gradient(linear,0 100%,100% 0,color-stop(25%,rgba(255,255,255,0.3)),color-stop(25%,transparent),color-stop(50%,transparent),color-stop(50%,rgba(255,255,255,0.3)),color-stop(75%,rgba(255,255,255,0.3)),color-stop(75%,transparent));   
  27.  background-size:16px 16px;   
  28. }  

最终效果如下图所示:
CSS3制作彩色进度条样式的代码示例分享

二、制作静态的蓝色进度条
html代码:

XML/HTML Code复制内容到剪贴板
  1. <div class="progress-bar orange"> <span style="width:60%;"></span> </div>  

css代码:

CSS Code复制内容到剪贴板
  1. .orange span{   
  2.  background-image:-webkit-gradient(linear,0% 0%,0% 100%,from(#fecd22),to(#fd9415));   
  3.  background-image:-moz-linear-gradient(-90deg,#fecd22,#fd9415);   
  4. }  

最终效果如下图所示:
CSS3制作彩色进度条样式的代码示例分享

三、制作静态的绿色进度条
html代码:

XML/HTML Code复制内容到剪贴板
  1. <div> <span style="width:80%;"></span> </div>  

css代码:

CSS Code复制内容到剪贴板
  1. .green span{   
  2.  background-color:#00ff24;   
  3.  box-shadow:rgba(255,255,255,0.7)0 5px 5px inser,rgba(255,255,255,0.7)0 -5px 5px inset;   
  4.  -webkit-box-shadow:rgba(255, 255, 255, 0.7) 0 5px 5px inset, rgba(255, 255, 255, 0.7) 0 -5px 5px inset;   
  5.  -moz-box-shadow:rgba(255, 255, 255, 0.7) 0 5px 5px inset, rgba(255, 255, 255, 0.7) 0 -5px 5px inset;   
  6. }  

最终效果如下图所示:
CSS3制作彩色进度条样式的代码示例分享

四、为紫色条纹添加动态效果
css代码:

CSS Code复制内容到剪贴板
  1. .purple span:hover{   
  2.  -webkit-animation:animate-stripes 3s linear infinite;   
  3.  -moz-animation:3s linear 0s normal none infinite animate-stripes;   
  4. }   
  5. @-webkit-keyframes animate-stripes {   
  6. 0% {background-position: 0 0;} 100% {background-position60px 0;}   
  7. }   
  8. @-moz-keyframes animate-stripes {   
  9. 0% {background-position: 0 0;} 100% {background-position60px 0;}   
  10. }  

鼠标放上去之后,动态效果会出现。

HTML / CSS 相关文章推荐
CSS3 选择器 伪类选择器介绍
Jan 21 HTML / CSS
用css3制作纸张效果(外翻卷角)
Feb 01 HTML / CSS
纯CSS和jQuery实现的在页面顶部显示的进度条效果2例(仿手机浏览器进度条效果)
Apr 16 HTML / CSS
用纯css3实现的图片放大镜特效效果非常不错
Sep 02 HTML / CSS
CSS3弹性盒模型开发笔记(二)
Apr 26 HTML / CSS
使用css实现android系统的loading加载动画
Jul 25 HTML / CSS
CSS3中的弹性布局em运用入门详解 1em等于多少像素
Feb 08 HTML / CSS
详解HTML5 canvas绘图基本使用方法
Jan 29 HTML / CSS
HTML5梦幻之旅——炫丽的流星雨效果实现过程
Aug 06 HTML / CSS
HTML5 Canvas 实现圆形进度条并显示数字百分比效果示例
Aug 18 HTML / CSS
SVG实现多彩圆环倒计时效果的示例代码
Nov 21 HTML / CSS
使用placeholder属性设置input文本框的提示信息
Feb 19 HTML / CSS
css3 transform及原生js实现鼠标拖动3D立方体旋转
Jun 20 #HTML / CSS
CSS3实现3D翻书效果
Jun 20 #HTML / CSS
用CSS3打造HTML5的Logo(实现代码)
Jun 16 #HTML / CSS
CSS3实现翘边的阴影效果的代码示例
Jun 13 #HTML / CSS
CSS的background属性及CSS3的背景图片设置总结
Jun 13 #HTML / CSS
CSS3中的常用选择器使用示例整理
Jun 13 #HTML / CSS
CSS3中的@keyframes关键帧动画的选择器绑定
Jun 13 #HTML / CSS
You might like
不用数据库的多用户文件自由上传投票系统(1)
2006/10/09 PHP
js监听表单value的修改同步问题,跨浏览器支持
2009/12/31 Javascript
基于jQuery的弹出消息插件 DivAlert之旅(一)
2010/04/01 Javascript
某页码显示的helper 少量调整,另附js版
2010/09/12 Javascript
来自国外的14个图片放大编辑的jQuery插件整理
2010/10/20 Javascript
一张Web前端的思维导图分享
2015/07/03 Javascript
原生js配合cookie制作保存路径的拖拽
2015/12/29 Javascript
jQuery easyui的validatebox校验规则扩展及easyui校验框validatebox用法
2016/01/18 Javascript
详解AngularJS中的http拦截
2016/02/09 Javascript
深入剖析JavaScript:Object类型
2016/05/10 Javascript
jQuery on()方法绑定动态元素的点击事件无响应的解决办法
2016/07/07 Javascript
jQuery实现可展开折叠的导航效果示例
2016/09/12 Javascript
js生成随机颜色方法代码分享(三种)
2016/12/29 Javascript
vue中$set的使用(结合在实际应用中遇到的坑)
2018/07/10 Javascript
基于ajax实现上传图片代码示例解析
2020/12/03 Javascript
Python内置模块logging用法实例分析
2018/02/12 Python
windows7 32、64位下python爬虫框架scrapy环境的搭建方法
2018/11/29 Python
Python骚操作之动态定义函数
2019/03/26 Python
24式加速你的Python(小结)
2019/06/13 Python
Pyecharts地图显示不完成问题解决方案
2020/05/11 Python
Django通过json格式收集主机信息
2020/05/29 Python
详解查看Python解释器路径的两种方式
2020/10/15 Python
编写python代码实现简单抽奖器
2020/10/20 Python
Python排序函数的使用方法详解
2020/12/11 Python
使用CSS3配合IE滤镜实现渐变和投影的效果
2015/09/06 HTML / CSS
使用html5 canvas 画时钟代码实例分享
2015/11/11 HTML / CSS
写给老婆的检讨书
2014/02/21 职场文书
参赛口号
2014/06/16 职场文书
医德医风自我评价
2014/09/19 职场文书
2015年度酒店客房部工作总结
2015/05/25 职场文书
七年级作文之我的梦想
2019/10/16 职场文书
在python中实现导入一个需要传参的模块
2021/05/12 Python
react合成事件与原生事件的相关理解
2021/05/13 Javascript
一文带你探究MySQL中的NULL
2021/11/11 MySQL
Python正则表达式中flags参数的实例详解
2022/04/01 Python
疑《守望先锋2》A测截图泄露 或将推出新模式、新界面
2022/04/03 其他游戏