CSS实现进度条和订单进度条的示例


Posted in HTML / CSS onNovember 05, 2020

最近半个月为了期末考试,可要了学渣我半瓶血啊!今天本该好好复习的,可是状态不好,就随便找点乐子玩一玩,于是乎就想起之前面试时面试官给的一道题(见标题),那就弄点简单的小玩意给自己洗洗脑咯。

简单地效果图如下:

CSS实现进度条和订单进度条的示例

CSS实现进度条:

html结构:

<div id="progress">
    <span>70%</span>
</div>

css样式:

#progress{
    width: 50%; 
    height: 30px;
    border:1px solid #ccc;
    border-radius: 15px;
    margin: 50px 0 0 100px;
    overflow: hidden;
    box-shadow: 0 0 5px 0px #ddd inset;
}

#progress span {
    display: inline-block;
    width: 70%;
    height: 100%;
    background: #2989d8; /* Old browsers */
    background: -moz-linear-gradient(45deg, #2989d8 33%, #7db9e8 34%, #7db9e8 59%, #2989d8 60%); /* FF3.6+ */
    background: -webkit-gradient(linear, left bottom, right top, color-stop(33%,#2989d8), color-stop(34%,#7db9e8), color-stop(59%,#7db9e8), color-stop(60%,#2989d8)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(45deg, #2989d8 33%,#7db9e8 34%,#7db9e8 59%,#2989d8 60%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(45deg, #2989d8 33%,#7db9e8 34%,#7db9e8 59%,#2989d8 60%); /* Opera 11.10+ */
    background: -ms-linear-gradient(45deg, #2989d8 33%,#7db9e8 34%,#7db9e8 59%,#2989d8 60%); /* IE10+ */
    background: linear-gradient(45deg, #2989d8 33%,#7db9e8 34%,#7db9e8 59%,#2989d8 60%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2989d8', endColorstr='#2989d8',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    background-size: 60px 30px;
    text-align: center;
    color:#fff;
}

对于进度条,其中的进度颜色也可以是纯色,若想要用渐变的话,可以到此网站:http://www.colorzilla.com/gradient-editor/ ,这样完成渐变效果就变得非常简单,跟用PS的操作是一样一样的。将背景设置为渐变后,还需要设置background-size,这样才能实现重复效果:

CSS实现进度条和订单进度条的示例

css实现订单进度条:

html结构:

<div id="progressBar">
     <!-- 进度条 -->
     <div>
         <span></span>
     </div>
     <!-- 五个圆 -->
     <span></span>
     <span></span>
     <span></span>
     <span></span>
     <span></span>
</div>

css样式:

#progressBar{
    width: 80%;
    height: 50px;
    position: relative;
    margin: 50px 0 0 100px;
}
#progressBar div{
    width: 100%;
    height: 10px;
    position: absolute;
    top:50%;
    left: 0;
    margin-top:-20px;
    border:1px solid #ddd;
    background: #ccc;
}
#progressBar div span{
    position: absolute;
    display: inline-block;
    background: green;
    height: 10px;
    width: 25%;
}
#progressBar>span{
    position: absolute;
    top:0;
    margin-top: -10px;
    width: 40px;
    height: 40px;
    border:2px solid #ddd;
    border-radius: 50%;
    background: green;
    margin-left: -20px;
    color:#fff;
}
#progressBar>span:nth-child(1){
    left: 0%;
}
#progressBar>span:nth-child(2){
    left: 25%;
    background:green;
}
#progressBar>span:nth-child(3){
    left: 50%;
    background:#ccc;
}
#progressBar>span:nth-child(4){
    left: 75%;
    background:#ccc;
}
#progressBar>span:nth-child(5){
    left: 100%;
    background:#ccc;
}

然后用JS就能实现动态的进度条啦!

PS:CSS样式没怎么优化,然后调试CSS代码时发现第一个圆的样式不起作用,所以才将默认背景色改成绿色,希望能帮我解决这个小BUG的博友留言一下哟,谢谢 !!!

原文链接:https://www.cnblogs.com/jr1993/p/4598630.html

以上就是CSS实现进度条和订单进度条的示例的详细内容,更多关于css实现进度条的资料请关注三水点靠木其它相关文章!

HTML / CSS 相关文章推荐
利用CSS3实现自定义滚动条代码分享
Aug 18 HTML / CSS
CSS3弹性布局内容对齐(justify-content)属性使用详解
Jul 31 HTML / CSS
CSS3媒体查询(Media Queries)介绍
Sep 12 HTML / CSS
CSS的background属性及CSS3的背景图片设置总结
Jun 13 HTML / CSS
CSS3实现水平居中、垂直居中、水平垂直居中的实例代码
Feb 27 HTML / CSS
html5中如何将图片的绝对路径转换成文件对象
Jan 11 HTML / CSS
html5 兼容IE6结构的实现代码
May 14 HTML / CSS
HTML5移动端开发中的Viewport标签及相关CSS用法解析
Apr 15 HTML / CSS
CSS3点击按钮圆形进度打钩效果的实现代码
Mar 30 HTML / CSS
HTML5简单实现添加背景音乐的几种方法
May 12 HTML / CSS
css实现两栏布局,左侧固定宽,右侧自适应的多种方法
Aug 07 HTML / CSS
CSS Transition通过改变Height实现展开收起元素
Aug 07 HTML / CSS
一篇文章带你学习CSS3图片边框
Nov 04 #HTML / CSS
CSS3实现时间轴特效
Nov 02 #HTML / CSS
CSS3制作皮卡丘动画壁纸的示例
Nov 02 #HTML / CSS
详解background属性的8个属性值(面试题)
Nov 02 #HTML / CSS
css3实现二维码扫描特效的示例
Oct 29 #HTML / CSS
CSS3实现彩色进度条动画的示例
Oct 29 #HTML / CSS
解决CSS3 transition-delay 属性默认值0不带单位失效的问题
Oct 29 #HTML / CSS
You might like
动画 《Pokemon Sword·Shield》系列WEB动画《薄明之翼》第2话声优阵容公开!
2020/03/06 日漫
计数器详细设计
2006/10/09 PHP
用来给图片加水印的PHP类
2008/04/09 PHP
php socket客户端及服务器端应用实例
2014/07/04 PHP
php计算指定目录下文件占用空间的方法
2015/03/13 PHP
PHP使用正则表达式获取微博中的话题和对象名
2015/07/18 PHP
php读取和保存base64编码的图片内容
2017/04/22 PHP
php引用和拷贝的区别知识点总结
2019/09/23 PHP
有关js的变量作用域和this指针的讨论
2010/12/16 Javascript
简介JavaScript中substring()方法的使用
2015/06/06 Javascript
聊一聊JS中的prototype
2016/09/29 Javascript
浅谈js控制li标签排序问题 js调用php函数的方法
2016/10/16 Javascript
原生js实现吸顶效果
2017/03/13 Javascript
通过源码分析Vue的双向数据绑定详解
2017/09/24 Javascript
使用Vuex解决Vue中的身份验证问题
2018/09/28 Javascript
cdn模式下vue的基本用法详解
2018/10/07 Javascript
JS面试题大坑之隐式类型转换实例代码
2018/10/14 Javascript
Angular2使用SVG自定义图表(条形图、折线图)组件示例
2019/05/10 Javascript
vue动态循环出的多个select出现过的变为disabled(实例代码)
2019/11/10 Javascript
详解Nuxt.js 实战集锦
2019/11/19 Javascript
JS call()及apply()方法使用实例汇总
2020/07/11 Javascript
利用Python绘制数据的瀑布图的教程
2015/04/07 Python
python如何为被装饰的函数保留元数据
2018/03/21 Python
Python图像处理之颜色的定义与使用分析
2019/01/03 Python
在tensorflow中实现屏蔽输出的log信息
2020/02/04 Python
Windows上安装tensorflow  详细教程(图文详解)
2020/02/04 Python
python3实现将json对象存入Redis以及数据的导入导出
2020/07/16 Python
CSS3实战第一波 让我们尽情的圆角吧
2010/08/27 HTML / CSS
video实现有声音自动播放的实现方法
2020/05/20 HTML / CSS
会计主管岗位职责范文
2013/11/08 职场文书
法律专业实习鉴定
2013/12/22 职场文书
信息管理专业自荐书
2014/06/05 职场文书
2015元旦节寄语
2014/12/08 职场文书
大一学生个人总结
2015/02/15 职场文书
个人求职自荐信范文
2015/03/06 职场文书
销售会议开幕词
2016/03/04 职场文书