纯CSS实现一个简单步骤条的示例代码

  发布时间:2022-07-13 16:25:19   作者: 水开泡茶   我要评论
本文主要介绍了纯CSS实现一个简单步骤条的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
(福利推荐:【腾讯云】服务器最新限时优惠活动,云服务器1核2G仅99元/年、2核4G仅768元/3年,立即抢购>>>:9i0i.cn/qcloud

(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun

前言

HTML中的input是一个十分强大的标签,配合上CSS,在一定程度上基本可以代替部分JS控制。
最近在搞一个步骤条,于是乎,想着使用CSS给做出来,本文记叙实现的基本思路。

效果

代码

  • 首先,使用<input type="checkbox" />实现作为步骤的元素,然后,按照顺序将每一个步骤排好位置,接着借用其他元素对checkbox进行美化;都是比较常规的处理,这部分不再赘述。 整体布局如下:
<div class="steps">
    <input type="checkbox" class="step-node" data-name="step-1" />
    <input type="checkbox" class="step-node" data-name="step-2" />
    <input type="checkbox" class="step-node" data-name="step-3" />
    <input type="checkbox" class="step-node" data-name="step-4" />
    <input type="checkbox" class="step-node" data-name="step-5" />
 </div>

加上css,结果如下(步骤节点可以纵放或者横放)

  • 然后就是链接每两个步骤节点之间的部分,链接部分的前后步骤节点都完成的话,那么相应的链接部分也应该亮起。假如step-2完成了,那么step-1step-2之间的链接部分也应该改变颜色,与其他未完成部分分开。
  • 也就是说,每个步骤完成时,与上一个步骤的链接部分需要改变颜色;链接部分受控于链接末端的步骤,所以最好使用label标签或者末端步骤的伪元素实现,本文使用before实现:
.step-node::before {
  content: '';
  position: absolute;
  /* 向上方移动,确定链接两个步骤 */
  top: -17px;
  left: 25px;
  height: 18px;
  width: 10px;
  background-color: #a3a3a3;
}

  • 然后就是当末端步骤完成(被选中)时,改变自身和与上一个步骤链接部分的颜色:
/* 链接部分 */
.step-node:checked:before {
  background-color: #ca8a04;
}
/* 自身样式更改 */
.step-node:checked::after {
  background-color: #fbbf24;
  color: #ca8a04;
}

至此就基本实现步骤的功能

然而,步骤必须按顺序完成,不能跳过某个步骤完成下一个步骤。

现在是可以跳过第二步step-2完成第三步step-3,这显然不对,需要对步骤的点击事件进行处理。一般这种逻辑都得JS帮忙进行处理,但CSS其实也可以模拟。
只要添加一个z-index较高的遮罩,挡住所有的步骤节点,就可以实现无法点击的功能;然后将当前可以点击的步骤节点的z-index设置为最高,就可以恢复点击效果。 添加遮罩如下:

.steps::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9;
}

添加完遮罩之后,就无法再点击任何步骤节点了。
接下来,就是可以点击的节点样式,可以点击的步骤节点就是所有被选中checkbox之后的第一个没有被选中的checkbox:

.step-node:checked + .step-node:not(:checked)::after {
  z-index: 10;
}

但是一开始并没有的被选中的步骤节点,上面的样式自然也就不会生效;那么一开始自然就是第一个步骤节点可以点击了:

.step-node:first-of-type:after {
  z-index: 10;
}

/* 被选中之后,取消层级,变会不可点击 */
.step-node:checked:after {
  z-index: 0;
}

 到此这篇关于纯CSS实现一个简单步骤条的示例代码的文章就介绍到这了,更多相关CSS步骤条内容请搜索程序员之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持程序员之家!

相关文章

  • 使用CSS+HTML实现简单的魔幻霓虹灯文字特效

    这篇文章主要介绍了使用CSS+HTML实现简单的魔幻霓虹灯文字特效,CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样
    2023-05-08
  • css实现电梯导航的项目实践

    CSS梯形导航图是一种使用 CSS 布局实现的导航设计,可以根据需要灵活调整导航菜单的上下位置和大小,本文主要介绍了css实现电梯导航,具有一定的参考价值,感兴趣的可以了解
    2023-05-06
  • CSS中calc(100%-100px)不加空格不生效

    本文主要介绍了CSS中calc(100%-100px)不加空格不生效,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学
    2023-05-05
  • css弧边选项卡的项目实践

    本文主要介绍了css弧边选项卡的项目实践,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-05-05
  • CSS实现鼠标悬浮动画特效

    Css(层叠样式表)是种格式化网页的标准方式,用于控制设置网页的样式,并且允许CSS样式信息与网页内容(由HTML语言定义)分离的一种技术,使用css可以制作各种好看的动画特效,
    2023-05-04
  • CSS link与@import的区别和用法解析

    CSS的link和@import都是用于引入外部CSS文件的方法,但它们有一些区别和不同的用法,本文通过一个简单的代码演示,展示了link和@import的用法,感兴趣的朋友跟随小编一起看
    2023-05-04
  • 使用CSS实现百叶窗效果示例代码

    这篇文章主要介绍了使用CSS实现百叶窗效果示例代码,技术上只使用了css+html,还是非常容易学习的,做出来的百叶窗效果也是很丝滑,文中提供了详细的代码,需要的朋友可以参考
    2023-04-28
  • 使用CSS实现按钮边缘跑马灯动画

    这篇文章主要介绍了使用CSS实现按钮边缘跑马灯动画,技术上只使用了css+html,还是非常容易学习的,文中提供了详细的代码,需要的朋友可以参考下
    2023-04-28
  • css旋转导航的示例代码

    本文主要介绍了css旋转导航的示例代码,文中通过示例代码介绍的非常详细,该导航可用在一些网站首页导航栏中,需要的朋友们下面随着小编来一起学习学习吧
    2023-04-27
  • css实现交融文字效果的项目实践

    这篇文章将介绍如何使用CSS实现交融文字效果,这是一种独特的标题设计,可以增加页面的视觉吸引力和用户体验。通过使用CSS的letter-spacing属性,我们可以创建出字母之间交
    2023-04-27

最新评论

?


http://www.vxiaotou.com