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 弹性布局快速入门
Jun 06 HTML / CSS
使用css3制作动感导航条示例
Jan 26 HTML / CSS
CSS实现限制字数功能当对象内文本溢出时显示省略标记
Aug 20 HTML / CSS
使用CSS3制作饼状旋转载入效果的实例
Jun 23 HTML / CSS
实例讲解CSS3中的box-flex弹性盒属性布局
Jun 09 HTML / CSS
纯html5+css3下拉导航菜单实现代码
Mar 18 HTML / CSS
H5调用相机拍照并压缩图片的实例代码
Jul 20 HTML / CSS
HTML5实现音频和视频嵌入的方法
Aug 22 HTML / CSS
Html5获取高德地图定位天气的方法
Dec 26 HTML / CSS
HTML5超文本标记语言的实现方法
Sep 24 HTML / CSS
Html5页面点击遮罩层背景关闭遮罩层
Nov 30 HTML / CSS
HTML页面滚动时部分内容位置固定不滚动的实现
Apr 14 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
可快速识别放射性物质-国外大神教你diy一个开放式辐射探测器
2020/03/12 无线电
一个简单实现多条件查询的例子
2006/10/09 PHP
yii框架builder、update、delete使用方法
2014/04/30 PHP
使用PHP实现阻止用户上传成人照片或者裸照
2014/12/25 PHP
PHP中字符安全过滤函数使用小结
2015/02/25 PHP
PHP查找与搜索数组元素方法总结
2015/06/12 PHP
javascript 面向对象 function类
2010/05/13 Javascript
Javascript笔记一 js以及json基础使用说明
2010/05/22 Javascript
JavaScript 拾碎[三] 使用className属性
2010/10/16 Javascript
JS模板实现方法
2013/04/03 Javascript
jQuery的load()方法及其回调函数用法实例
2015/03/25 Javascript
javascript实现捕捉键盘上按下的键
2015/05/05 Javascript
jQuery实现点击水纹波动动画
2016/04/10 Javascript
浅谈JavaScript 中有关时间对象的方法
2016/08/15 Javascript
jQuery实现元素的插入
2017/02/27 Javascript
使用grunt合并压缩js和css文件的方法
2017/03/02 Javascript
JS与CSS3实现图片响应鼠标移动放大效果示例
2018/05/04 Javascript
浅谈Fetch 数据交互方式
2018/12/20 Javascript
Vue切换Tab动态渲染组件的操作
2020/09/21 Javascript
微信小程序反编译的实现
2020/12/10 Javascript
[02:36]DOTA2上海特锦赛 回忆电竞生涯的重要瞬间
2016/03/25 DOTA
python 字符串只保留汉字的方法
2018/11/16 Python
django配置连接数据库及原生sql语句的使用方法
2019/03/03 Python
Django多进程滚动日志问题解决方案
2019/12/17 Python
tensorflow 初始化未初始化的变量实例
2020/02/06 Python
python怎么删除缓存文件
2020/07/19 Python
Python实现http接口自动化测试的示例代码
2020/10/09 Python
Django用户认证系统如何实现自定义
2020/11/12 Python
paramiko使用tail实时获取服务器的日志输出详解
2020/12/06 Python
活动总结怎么写啊
2014/05/07 职场文书
写得不错的求职信范文
2014/07/11 职场文书
个人年终总结范文
2015/03/09 职场文书
教师考核鉴定意见
2015/06/05 职场文书
学校团代会开幕词
2016/03/04 职场文书
Vue3如何理解ref toRef和toRefs的区别
2022/02/18 Vue.js
CSS 鼠标点击拖拽效果的实现代码
2022/12/24 HTML / CSS