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 渐变(Gradients)之CSS3 径向渐变
Jul 08 HTML / CSS
CSS3截取字符串实例代码【推荐】
Jun 07 HTML / CSS
移动端rem布局的两种实现方法
Jan 03 HTML / CSS
css3实现超立体3D图片侧翻倾斜效果
Apr 16 HTML / CSS
使用CSS3美化HTML表单的技巧演示
May 17 HTML / CSS
CSS3的calc()做响应模式布局的实现方法
Sep 06 HTML / CSS
html5记忆翻牌游戏实现思路及代码
Jul 25 HTML / CSS
html5 video标签屏蔽右键视频另存为的js代码
Nov 12 HTML / CSS
html5+css3气泡组件的实现
Nov 21 HTML / CSS
HTML5 图片悬停放大的实现代码示例
Dec 04 HTML / CSS
HTML5给汉字加拼音收起展开组件的实现代码
Apr 08 HTML / CSS
带你了解CSS基础知识,样式
Jul 21 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
功能齐全的PHP发送邮件类代码附详细说明
2008/07/10 PHP
php之对抗Web扫描器的脚本技巧
2008/10/01 PHP
深入PHP运行环境配置的详解
2013/06/04 PHP
php调用MySQL存储过程的方法集合(推荐)
2013/07/03 PHP
PHP的反射类ReflectionClass、ReflectionMethod使用实例
2014/08/05 PHP
使用PHP连接多种数据库的实现代码(mysql,access,sqlserver,Oracle)
2016/12/21 PHP
php 判断IP为有效IP地址的方法
2018/01/28 PHP
图片之间的切换
2006/06/26 Javascript
JQuery radio(单选按钮)操作方法汇总
2015/04/15 Javascript
javascript实现类似java中getClass()得到对象类名的方法
2015/07/27 Javascript
iscroll.js的上拉下拉刷新时无法回弹的解决方法
2016/02/18 Javascript
微信小程序 在Chrome浏览器上运行以及WebStorm的使用
2016/09/27 Javascript
Javascript中click与blur事件的顺序详析
2017/04/25 Javascript
ES6数组的扩展详解
2017/04/25 Javascript
Vue2.0学习之详解Vue 组件及父子组件通信
2017/12/12 Javascript
js最简单的双向绑定实例讲解
2018/01/02 Javascript
详解AngularJS之$window窗口对象
2018/01/17 Javascript
微信小程序实现单选选项卡切换效果
2020/06/19 Javascript
JavaScript实现多张图片放大镜效果示例【不限定图片尺寸,rem单位】
2019/05/14 Javascript
JavaScript实现指定数量的并发限制的示例代码
2020/03/10 Javascript
javaScript代码飘红报错看不懂?读完这篇文章再试试
2020/08/19 Javascript
微信小程序获取当前时间及星期几的实例代码
2020/09/20 Javascript
Python自动化运维_文件内容差异对比分析
2017/12/13 Python
使用pandas的DataFrame的plot方法绘制图像的实例
2018/05/24 Python
numpy基础教程之np.linalg
2019/02/12 Python
python树的同构学习笔记
2019/09/14 Python
Win下PyInstaller 安装和使用教程
2019/12/25 Python
JAVA及PYTHON质数计算代码对比解析
2020/06/10 Python
瑞典最大的儿童用品网上商店:pinkorblue.se
2021/03/09 全球购物
linux面试相关问题
2012/08/11 面试题
团委竞选演讲稿
2014/04/24 职场文书
个人四风对照检查材料
2014/09/26 职场文书
先进班集体申报材料
2014/12/26 职场文书
试用期辞职信范文
2015/03/02 职场文书
浅谈tf.train.Saver()与tf.train.import_meta_graph的要点
2021/05/26 Python
Tomcat配置访问日志和线程数
2022/05/06 Servers