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中transform变换模型的渲染
May 27 HTML / CSS
CSS3 RGBA色彩模式使用实例讲解
Apr 26 HTML / CSS
详解HTML5中垂直上下居中的解决方案
Dec 20 HTML / CSS
HTML5拖拽文件到浏览器并实现文件上传下载功能代码
Jun 06 HTML / CSS
让ie浏览器成为支持html5的浏览器的解决方法(使用html5shiv)
Apr 08 HTML / CSS
HTML5 visibilityState属性详细介绍和使用实例
May 03 HTML / CSS
HTML5使用drawImage()方法绘制图像
Jun 23 HTML / CSS
利用HTML5 Canvas API绘制矩形的超级攻略
Mar 21 HTML / CSS
html5组织内容_动力节点Java学院整理
Jul 10 HTML / CSS
canvas实现漂亮的下雨效果的示例
Apr 18 HTML / CSS
HTML5 Blob对象的具体使用
May 22 HTML / CSS
浅析数据存储的三种方式 cookie sessionstorage localstorage 的异同
Jun 04 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
php阻止页面后退的方法分享
2014/02/17 PHP
php CI框架插入一条或多条sql记录示例
2014/07/29 PHP
linux下php上传文件注意事项
2016/06/11 PHP
thinkphp验证码的实现(form、ajax实现验证)
2016/07/28 PHP
PHP 获取 ping 时间的实现方法
2017/09/29 PHP
PHP递归实现汉诺塔问题的方法示例
2017/11/25 PHP
PHP实现 APP端微信支付功能
2018/06/22 PHP
laravel实现按月或天或小时统计mysql数据的方法
2019/10/09 PHP
对laravel的csrf 防御机制详解,及form中csrf_token()的存在介绍
2019/10/24 PHP
jquery插件jbox使用iframe关闭问题
2009/02/09 Javascript
javascript基础之查找元素的详细介绍(访问节点)
2013/07/05 Javascript
Javascript 多浏览器兼容总结(实战经验)
2013/10/30 Javascript
js简单的表格添加行和删除行操作示例
2014/03/31 Javascript
iscroll.js的上拉下拉刷新时无法回弹的解决方法
2016/02/18 Javascript
node.js连接mongoDB数据库 快速搭建自己的web服务
2016/04/17 Javascript
Bootstrap表单组件教程详解
2016/04/26 Javascript
vue 本地环境跨域请求proxyTable的方法
2018/09/19 Javascript
Vue表单输入绑定的示例代码
2018/11/01 Javascript
antd-DatePicker组件获取时间值,及相关设置方式
2020/10/27 Javascript
[02:33]DOTA2英雄基础教程 司夜刺客
2013/12/04 DOTA
简单谈谈Python中的反转字符串问题
2016/10/24 Python
python实现下载整个ftp目录的方法
2017/01/17 Python
Python实现两个list对应元素相减操作示例
2017/06/09 Python
tensorflow TFRecords文件的生成和读取的方法
2018/02/06 Python
Python获取指定文件夹下的文件名的方法
2018/02/06 Python
Python实现修改文件内容的方法分析
2018/03/25 Python
python重试装饰器的简单实现方法
2019/01/31 Python
python装饰器代替set get方法实例
2019/12/19 Python
详解如何在css3打包后自动追加前缀插件:autoprefixer
2018/12/18 HTML / CSS
Bonami斯洛伐克:购买家具和家居饰品
2019/07/02 全球购物
团员个人的自我评价
2013/12/02 职场文书
《放飞蜻蜓》教学反思
2014/04/27 职场文书
男方婚前保证书
2015/02/28 职场文书
中学教师读书笔记
2015/07/01 职场文书
学习商务礼仪心得体会
2016/01/22 职场文书
三十年再续同学情倡议书
2019/11/27 职场文书