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用@font-face实现自定义英文字体
Sep 23 HTML / CSS
CSS3移动端vw+rem不依赖JS实现响应式布局的方法
Jan 23 HTML / CSS
html5的新增的标签和废除的标签简要概述
Feb 20 HTML / CSS
HTML5 embed标签定义和用法详解
May 09 HTML / CSS
html5中JavaScript removeChild 删除所有节点
May 16 HTML / CSS
html5+css3进度条倒计时动画特效代码【推荐】
Mar 08 HTML / CSS
HTML5之消息通知的使用(Web Notification)
Oct 30 HTML / CSS
HTML5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷新功能的实现代码
Apr 10 HTML / CSS
HTML5 canvas实现的静态循环滚动播放弹幕
Jan 05 HTML / CSS
HTML中table表格拆分合并(colspan、rowspan)
Apr 07 HTML / CSS
详解Html5项目适配系统深色模式方案总结
Apr 14 HTML / CSS
使用CSS实现百叶窗效果示例代码
May 07 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
不用iconv库的gb2312与utf-8的互换函数
2006/10/09 PHP
Mysql和网页显示乱码解决方法集锦
2008/03/27 PHP
php编写批量生成不重复的卡号密码代码
2015/05/14 PHP
PHP基于PDO调用sqlserver存储过程通用方法【基于Yii框架】
2017/10/07 PHP
javascript 事件处理、鼠标拖动效果实现方法详解
2012/05/11 Javascript
jQuery中阻止冒泡事件的方法介绍
2014/04/12 Javascript
使用script的src实现跨域和类似ajax效果
2014/11/10 Javascript
jQuery中delegate()方法用法实例
2015/01/19 Javascript
基于jQuery实现仿百度首页换肤背景图片切换代码
2015/08/25 Javascript
js实现简单计算器
2015/11/22 Javascript
基于jQuery实现鼠标点击导航菜单水波动画效果附源码下载
2016/01/06 Javascript
bootstrap选项卡使用方法解析
2017/01/11 Javascript
jQuery实现最简单实用的分秒倒计时
2017/02/05 Javascript
深入nodejs中流(stream)的理解
2017/03/27 NodeJs
关于TypeScript中import JSON的正确姿势详解
2017/07/25 Javascript
让你彻底掌握es6 Promise的八段代码
2017/07/26 Javascript
JavaScript程序设计高级算法之动态规划实例分析
2017/11/24 Javascript
JavaScript数据结构与算法之二叉树实现查找最小值、最大值、给定值算法示例
2019/03/01 Javascript
怎样在vue项目下添加ESLint的方法
2019/05/16 Javascript
解决vue中使用proxy配置不同端口和ip接口问题
2019/08/14 Javascript
django ajax json的实例代码
2018/05/29 Python
django 自定义过滤器的实现
2019/02/26 Python
用Python实现二叉树、二叉树非递归遍历及绘制的例子
2019/08/09 Python
python3 常见解密加密算法实例分析【base64、MD5等】
2019/12/19 Python
用pandas划分数据集实现训练集和测试集
2020/07/20 Python
Python装饰器如何实现修复过程解析
2020/09/05 Python
HTML5实现可缩放时钟代码
2017/08/28 HTML / CSS
英国拖鞋购买网站:Bedroom Athletics
2020/02/28 全球购物
英国现代、当代和设计师家具店:Furntastic
2020/07/18 全球购物
外国人聘用意向书
2014/04/01 职场文书
《搭石》教学反思
2014/04/07 职场文书
创先争优活动党员公开承诺书
2014/08/29 职场文书
刑事和解协议书范本
2014/11/19 职场文书
安全生产奖惩制度
2015/08/06 职场文书
宝宝满月宴答谢词
2015/09/30 职场文书
CSS3实现模糊背景的三种效果示例
2021/03/30 HTML / CSS