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 按钮样式简单可扩展创建
Mar 18 HTML / CSS
CSS3实现超慢速移动动画效果非常流畅无卡顿
Jun 15 HTML / CSS
纯CSS3实现自定义Tooltip边框涂鸦风格的教程
Nov 05 HTML / CSS
利用CSS3的线性渐变linear-gradient制作边框的示例
Jun 02 HTML / CSS
canvas之万花筒效果的简单实现(推荐)
Aug 16 HTML / CSS
css3实现画半圆弧线的示例代码
Nov 06 HTML / CSS
CSS3自定义滚动条样式 ::webkit-scrollbar的示例代码详解
Jun 01 HTML / CSS
HTML5移动开发图片压缩上传功能
Nov 09 HTML / CSS
详解H5本地储存Web Storage
Jul 03 HTML / CSS
HTML5中canvas中的beginPath()和closePath()的重要性
Aug 24 HTML / CSS
html5设计原理(推荐收藏)
May 17 HTML / CSS
Canvas高级路径操作之拖拽对象的实现
Aug 05 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 stripos()函数及注意事项的分析
2013/06/08 PHP
php 获取页面中指定内容的实现类
2014/01/23 PHP
php显示指定目录下子目录的方法
2015/03/20 PHP
PHP人民币金额转大写实例代码
2015/10/02 PHP
PHP开发API接口签名生成及验证操作示例
2020/05/27 PHP
jquery ready函数源代码研究
2009/12/06 Javascript
js去除重复字符串两种实现方法
2013/01/09 Javascript
JavaScript设置IFrame高度自适应(兼容各主流浏览器)
2013/06/05 Javascript
js实现鼠标触发图片抖动效果的方法
2015/02/27 Javascript
js获取url传值的方法
2015/12/18 Javascript
JS获取当前使用的浏览器名字以及版本号实现方法
2016/08/19 Javascript
bootstrap datepicker 与bootstrapValidator同时使用时选择日期后无法正常触发校验的解决思路
2016/09/28 Javascript
深入对Vue.js $watch方法的理解
2017/03/20 Javascript
JavaScript mixin实现多继承的方法详解
2017/03/30 Javascript
最常用的jQuery表单验证(简单)
2017/05/23 jQuery
解析vue、angular深度作用选择器
2019/09/11 Javascript
基于vue-cli3创建libs库的实现方法
2019/12/04 Javascript
[02:51]2014DOTA2 TI小组赛总结中国军团全部进军钥匙球馆
2014/07/15 DOTA
[51:06]2018DOTA2亚洲邀请赛3月29日 小组赛A组 KG VS Liquid
2018/03/30 DOTA
Python编程入门的一些基本知识
2015/05/13 Python
Python连接mysql数据库的正确姿势
2016/02/03 Python
python从子线程中获得返回值的方法
2019/01/30 Python
详解django中Template语言
2020/02/22 Python
python 3.8.3 安装配置图文教程
2020/05/21 Python
Python Selenium实现无可视化界面过程解析
2020/08/25 Python
Python模块常用四种安装方式
2020/10/20 Python
洛杉矶时尚女装系列:J.ING US
2019/03/17 全球购物
Desigual美国官方网站:西班牙服装品牌
2019/03/29 全球购物
加拿大的标志性百货公司:Hudson’s Bay(哈得逊湾)
2019/09/03 全球购物
美国名牌香水折扣网站:Hottperfume
2021/02/10 全球购物
请解释在new与override的区别
2012/10/29 面试题
安全检查验收制度
2014/01/12 职场文书
《画》教学反思
2014/04/14 职场文书
《故都的秋》教学反思
2014/04/15 职场文书
期末考试复习计划
2015/01/19 职场文书
教师节主题班会教案
2015/08/17 职场文书