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 3D位移translate效果实例介绍
May 03 HTML / CSS
网页布局中CSS样式无效的十个重要原因详解
Aug 10 HTML / CSS
纯CSS3实现表单验证效果(非常不错)
Jan 18 HTML / CSS
css3实现超立体3D图片侧翻倾斜效果
Apr 16 HTML / CSS
CSS3实现各种图形的示例代码
Oct 19 HTML / CSS
css3实现多个元素依次显示效果
Dec 12 HTML / CSS
CSS3 @media的基本用法总结
Sep 10 HTML / CSS
使用HTML5捕捉音频与视频信息概述及实例
Aug 22 HTML / CSS
HTML5 拖拽批量上传文件的示例代码
Mar 28 HTML / CSS
详解如何通过H5(浏览器/WebView/其他)唤起本地app
Dec 11 HTML / CSS
html5拖拽应用记录及注意点
May 27 HTML / CSS
css3带你实现3D转换效果
Feb 24 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
ajax缓存问题解决途径
2006/12/06 PHP
可定制的PHP缩略图生成程式(需要GD库支持)
2007/03/06 PHP
php实现的简单压缩英文字符串的代码
2008/04/24 PHP
PHP中uploaded_files函数使用方法详解
2011/03/09 PHP
PHP实现获取文件mime类型多种方法解析
2020/05/28 PHP
js 居中漂浮广告
2010/03/21 Javascript
jQuery的attr与prop使用介绍
2013/10/10 Javascript
jQuery的animate函数实现图文切换动画效果
2015/05/03 Javascript
jQuery实现类似老虎机滚动抽奖效果
2015/08/06 Javascript
JQuery入门基础小实例(1)
2015/09/17 Javascript
javascript基本数据类型及类型检测常用方法小结
2016/12/14 Javascript
BootStrap 导航条实例代码
2017/05/18 Javascript
使用Electron构建React+Webpack桌面应用的方法
2017/12/15 Javascript
详解一个基于套接字实现长连接的express
2019/03/28 Javascript
vue+高德地图写地图选址组件的方法
2019/05/18 Javascript
javascript防抖函数debounce详解
2019/06/11 Javascript
vue实现浏览器全屏展示功能
2019/11/27 Javascript
如何使用RoughViz可视化Vue.js中的草绘图表
2021/01/30 Vue.js
利用matplotlib+numpy绘制多种绘图的方法实例
2017/05/03 Python
Django之无名分组和有名分组的实现
2019/04/16 Python
树莓派与PC端在局域网内运用python实现即时通讯
2019/06/22 Python
tensorflow模型的save与restore,及checkpoint中读取变量方式
2020/05/26 Python
python脚本第一行如何写
2020/08/30 Python
python爬取抖音视频的实例分析
2021/01/19 Python
前端水印的简单实现代码示例
2020/12/02 HTML / CSS
开放系统互连参考模型
2016/06/29 面试题
掌上明珠Java程序员面试总结
2016/02/23 面试题
公司演讲稿开场白
2014/08/25 职场文书
工作业绩不及格检讨书
2014/10/28 职场文书
建党伟业的观后感
2015/06/01 职场文书
小学数学继续教育研修日志
2015/11/13 职场文书
竞聘开场白方式有哪些?
2019/08/28 职场文书
分析MySQL抛出异常的几种常见解决方式
2021/05/18 MySQL
如何自己动手写SQL执行引擎
2021/06/02 MySQL
【海涛教你打DOTA】剑圣第一人称视角解说
2022/04/01 DOTA
CSS中float高度塌陷问题的四种解决方案
2022/04/18 HTML / CSS