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模拟jq点击事件的实例代码
Jul 06 HTML / CSS
css3学习心得分享
Aug 19 HTML / CSS
纯CSS实现的大小渐变、渐远效果
Apr 15 HTML / CSS
css3实现3D色子翻转特效
Dec 23 HTML / CSS
canvas粒子动画背景的实现示例
Sep 03 HTML / CSS
浅谈pc和移动端的响应式的使用
Jan 03 HTML / CSS
简单的HTML5初步入门教程
Sep 29 HTML / CSS
用html5绘制折线图的实例代码
Mar 25 HTML / CSS
浅析HTML5中的download属性使用
Mar 13 HTML / CSS
wordpress添加Html5的表单验证required方法小结
Aug 18 HTML / CSS
CSS 实现多彩、智能的阴影效果
May 12 HTML / CSS
CSS文本阴影 text-shadow 悬停效果详解
May 25 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
虫族 Zerg 历史背景
2020/03/14 星际争霸
php算开始时间到过期时间的相隔的天数
2011/01/12 PHP
PHP+FFMPEG实现将视频自动转码成H264标准Mp4文件
2014/09/24 PHP
php开发时容易忘记的一些技术细节
2016/02/03 PHP
Thinkphp框架+Layui实现图片/文件上传功能分析
2020/02/07 PHP
QQ邮箱的一个文本编辑器代码
2007/03/14 Javascript
javascript 树控件 比较好用
2009/06/11 Javascript
JavaScript中URL编码函数代码
2011/01/11 Javascript
js实现快速分享功能(你的文章分享工具)
2013/06/25 Javascript
JavaScript随机生成颜色的方法
2016/10/15 Javascript
jQuery模拟实现的select点击选择效果【附demo源码下载】
2016/11/09 Javascript
基于jQuery实现一个marquee无缝滚动的插件
2017/03/09 Javascript
nodejs模块nodemailer基本使用-邮件发送示例(支持附件)
2017/03/28 NodeJs
详解微信小程序Radio选中样式切换
2017/07/06 Javascript
详解如何探测小程序返回到webview页面
2019/05/14 Javascript
[01:18:45]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第三场2月1日
2021/03/11 DOTA
python3实现暴力穷举博客园密码
2016/06/19 Python
Python PyQt5实现的简易计算器功能示例
2017/08/23 Python
Python命令行解析模块详解
2018/02/01 Python
python读取xlsx的方法
2018/12/25 Python
Python 用matplotlib画以时间日期为x轴的图像
2019/08/06 Python
Python中私有属性的定义方式
2020/03/05 Python
python使用paramiko实现ssh的功能详解
2020/03/06 Python
pyCharm 设置调试输出窗口中文显示方式(字符码转换)
2020/06/09 Python
python 实现一个简单的线性回归案例
2020/12/17 Python
OpenCV+python实现膨胀和腐蚀的示例
2020/12/21 Python
印度尼西亚综合购物网站:Lazada印尼
2016/09/07 全球购物
办公室秘书岗位职责范本
2014/02/11 职场文书
《诚实与信任》教学反思
2014/04/10 职场文书
《小动物过冬》教学反思
2014/04/17 职场文书
诚实守信演讲稿
2014/09/01 职场文书
尊老爱幼演讲稿
2014/09/04 职场文书
党的群众路线教育实践活动领导班子整改方案
2014/10/25 职场文书
违纪检讨书范文
2015/01/27 职场文书
迎新年主持词
2015/07/06 职场文书
公务员的复习计划书,请收下!
2019/07/15 职场文书