html+css模仿流程条的实现

最新推荐文章于 2022-03-21 08:40:55 发布
最新推荐文章于 2022-03-21 08:40:55 发布
阅读量216 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HIRAETHZY/article/details/113056716
版权

如果所示，主要实现中间渐变的效果
在这里插入图片描述

<!-- test.html -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="X-UA-Compatible" content="edge" />
    <meta charset="utf-8" />
    <title>流程条的显示</title>
    <link rel="shortcut icon" href="../img/favicon.png">
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <link rel="stylesheet" href="test.css">
</head>

<body>
    <div class="flowStep">
        <ul>
            <li>
                <div class="stepText">
                    <p>第一步</p>
                    <p>THE&nbsp;FIRST&nbsp;STEP</p>
                </div>
                <div class="mainContent">
                    <span class="flowTriangle"></span>
                </div>
                <div class="rightContent">
                    <p>第一步的内容</p>
                </div>
            </li>

            <li>
                <div class="stepText">
                    <p>第二步</p>
                    <p>THE&nbsp;SECOND&nbsp;STEP</p>
                </div>
                <div class="mainContent">
                    <span class="flowTriangle"></span>
                </div>
                <div class="rightContent">
                    <p>第二步的内容</p>
                </div>

            </li>

            <li>
                <div class="stepText">
                    <p>第三步</p>
                    <p>THE&nbsp;THIRD&nbsp;STEP</p>
                </div>
                <div class="mainContent">
                    <span class="flowTriangle"></span>
                </div>
                <div class="rightContent">
                    <p>第三步的内容</p>
                </div>
            </li>

            <li>
                <div class="stepText">
                    <p>第四步</p>
                    <p>THE&nbsp;FOURTH&nbsp;STEP</p>
                </div>
                <div class="mainContent">
                    <span class="flowTriangle"></span>
                </div>
                <div class="rightContent">
                    <p>第四步的内容</p>
                </div>
            </li>

            <li>
                <div class="stepText">
                    <p>第五步</p>
                    <p>THE&nbsp;FIFTH&nbsp;STEP</p>
                </div>
                <div class="mainContent">
                    <span class="flowTriangle"></span>
                </div>
                <div class="rightContent">
                    <p>第五步的内容</p>
                </div>
            </li>

            <li>
                <div class="stepText">
                    <p>第六步</p>
                    <p>THE&nbsp;SIXTH&nbsp;STEP</p>
                </div>
                <div class="mainContent">
                    <span class="flowTriangle"></span>
                </div>
                <div class="rightContent">
                    <p>第六步的内容</p>
                </div>
            </li>

            <li>
                <div class="stepText">
                    <p>第七步</p>
                    <p>THE&nbsp;SEVENTH&nbsp;STEP</p>
                </div>
                <div class="mainContent">
                    <span class="flowTriangle"></span>
                </div>
                <div class="rightContent">
                    <p>第七步的内容</p>
                </div>
            </li>

            <li>
                <div class="stepText">
                    <p>第八步</p>
                    <p>THE&nbsp;EIGHTH&nbsp;STEP</p>
                </div>
                <div class="mainContent">
                    <span class="flowTriangle"></span>
                    <span class="flowTriangle"></span>
                </div>
                <div class="rightContent">
                    <p>完成</p>
                </div>
            </li>
        </ul>
    </div>
</body>

</html>

/* test.css */
ul {
    list-style: none;
}

.flowStep {
    width: 1200px;
    margin: 0 auto;
    background-color: #fff;
}

.flowStep ul {
    display: flex;
    flex-wrap: wrap;
}

.flowStep ul li {
    width: 100%;
    height: 130px;
    margin-left: 30px;
    border-bottom: 1px solid #f5f5f5;
    z-index: 96;
}

.flowStep ul li:last-child {
    height: 160px;
}

.stepText {
    width: 200px;
    float: left;
}

.stepText p {
    font-weight: bold;
    color: #db214c;
}

.stepText>p:first-child {
    font-size: 14px;
    margin-top: 40px;

}

.stepText>p:nth-child(2) {
    font-size: 16px;
}

.mainContent {
    width: 16px;
    height: 140px;
    float: left;
    position: relative;
    display: block;
    z-index: 1;
}


.flowStep>ul>li:nth-child(1)>div:nth-child(2) {
    height: 110px;
    margin-top: 30px;
    background-color: #ffd5df;
}

.flowStep>ul>li:nth-child(1)>div:nth-child(2) .flowTriangle {
    display: none;
}

.flowStep>ul>li:nth-child(2)>div:nth-child(2) {
    background-color: #f6a7ba;
    z-index: 97;
}

.flowStep>ul>li:nth-child(2)>div:nth-child(2) .flowTriangle {
    width: 0px;
    height: 0px;
    border: 8px solid transparent;
    border-top-color: #ffd5df;
    border-bottom-color: transparent;
    border-right-color: transparent;
    border-left-color: transparent;
    display: block;
    z-index: 99;
    margin-top: -1px;
}

.flowStep>ul>li:nth-child(3)>div:nth-child(2) {
    background-color: #f08ca4;
    z-index: 97;
}

.flowStep>ul>li:nth-child(3)>div:nth-child(2) .flowTriangle {
    width: 0px;
    height: 0px;
    border: 8px solid transparent;
    border-top-color: #f6a7ba;
    border-bottom-color: transparent;
    border-right-color: transparent;
    border-left-color: transparent;
    display: block;
    z-index: 99;
    margin-top: -1px;
}

.flowStep>ul>li:nth-child(4)>div:nth-child(2) {
    background-color: #ec7792;
    z-index: 97;
}

.flowStep>ul>li:nth-child(4)>div:nth-child(2) .flowTriangle {
    width: 0px;
    height: 0px;
    border: 8px solid transparent;
    border-top-color: #f08ca4;
    border-bottom-color: transparent;
    border-right-color: transparent;
    border-left-color: transparent;
    display: block;
    z-index: 99;
    margin-top: -1px;
}

.flowStep>ul>li:nth-child(5)>div:nth-child(2) {
    background-color: #e95c7e;
    z-index: 97;
}

.flowStep>ul>li:nth-child(5)>div:nth-child(2) .flowTriangle {
    width: 0px;
    height: 0px;
    border: 8px solid transparent;
    border-top-color: #ec7792;
    border-bottom-color: transparent;
    border-right-color: transparent;
    border-left-color: transparent;
    display: block;
    z-index: 99;
    margin-top: -1px;
}

.flowStep>ul>li:nth-child(6)>div:nth-child(2) {
    background-color: #e9496f;
    z-index: 97;
}

.flowStep>ul>li:nth-child(6)>div:nth-child(2) .flowTriangle {
    width: 0px;
    height: 0px;
    border: 8px solid transparent;
    border-top-color: #e95c7e;
    border-bottom-color: transparent;
    border-right-color: transparent;
    border-left-color: transparent;
    display: block;
    z-index: 99;
    margin-top: -1px;
}

.flowStep>ul>li:nth-child(7)>div:nth-child(2) {
    background-color: #e73660;
    z-index: 97;
}

.flowStep>ul>li:nth-child(7)>div:nth-child(2) .flowTriangle {
    width: 0px;
    height: 0px;
    border: 8px solid transparent;
    border-top-color: #e9496f;
    border-bottom-color: transparent;
    border-right-color: transparent;
    border-left-color: transparent;
    display: block;
    z-index: 99;
    margin-top: -1px;
}

.flowStep>ul>li:nth-child(8)>div:nth-child(2) {
    background-color: #dc214c;
    height: 110px;
    z-index: 97;
}

.flowStep>ul>li:nth-child(8)>div:nth-child(2)>.flowTriangle:first-child {
    width: 0px;
    height: 0px;
    border: 8px solid transparent;
    border-top-color: #e73660;
    border-bottom-color: transparent;
    border-right-color: transparent;
    border-left-color: transparent;
    display: block;
    z-index: 99;
    margin-top: -1px;
}

.flowStep>ul>li:nth-child(8)>div:nth-child(2)>.flowTriangle:last-child {
    width: 0px;
    height: 0px;
    border: 8px solid transparent;
    border-top-color: #db214c;
    border-bottom-color: transparent;
    border-right-color: transparent;
    border-left-color: transparent;
    display: block;
    z-index: 99;
    margin-top: 95px;
}

.rightContent {
    float: left;
    height: 50px;
    margin-left: 30px;
    padding-top: 45px;
}

.rightContent p {
    font-size: 16px;
    color: #333;

}
星Y
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
纯HTML流程步骤条
12-08
纯HTML自适应流程步骤条，根据需求定制修改，下载即可用
【HTML】步骤进度条组件实现
Minuhy
04-09 2721
简单实现一个简约风格的进度条组件
HTML步骤条引导效果
05-03
SUI里面实现的步骤导航效果，纯css实现。
html步骤条,css 步骤条
weixin_39640265的博客
06-16 334
效果： 代码：CSS步骤条.step-container {margin: 0;padding: 0;width: 100%;}.step-container li {display: inline-block;float: left;position: relative;margin: 0;padding: 0;width: 33%;height: 30px;line-height: 30px;...
HTML制作任务步骤条,步骤进度条 源代码
01-06
HTML制作任务步骤条,步骤进度条 源代码 第一步,第二步,...
模仿问卷星个人版html+css
06-02
【标题】：“模仿问卷星个人版html+css” 在网页设计和开发中，"模仿问卷星个人版html+css" 是一个常见的练习项目，旨在学习和掌握如何利用HTML（超文本标记语言）和CSS（层叠样式表）来构建一个类似于问卷星个人版...
html+css+js实现登录注册界面.rar
08-08
CSS3引入了许多新的特性，如Flexbox和Grid布局，可以更方便地实现响应式设计，使得界面在不同设备上都能良好显示。 JavaScript作为客户端脚本语言，赋予了网页动态交互的能力。在登录注册界面，JS可以实现用户输入...
HTML+CSS王者荣耀静态网页.zip
04-07
综上所述，这个"HTML+CSS王者荣耀静态网页"项目是学习和实践HTML和CSS的好例子，同时也展示了如何通过静态网页技术来实现特定主题的视觉呈现。通过研究这个项目，初学者可以深入理解网页开发的基本原理，并提升对...
模仿简书官网html+css.zip
07-17
【标题】"模仿简书官网html+css.zip"是一个压缩包文件，其内容主要是开发者为了学习和实践，根据简书官方网站的界面设计，用HTML（HyperText Markup Language）和CSS（Cascading Style Sheets）语言编写的源代码。这...
大学生网页制作之美食篇html+css静态网页设计
06-14
在“大学生网页制作之美食篇html+css静态网页设计”这个项目中，学生将学习如何运用HTML、CSS以及JavaScript这三种基础的Web开发技术来创建一个以美食为主题的静态网页。这个设计实例对于初学者来说非常实用，因为它...
html实现多种风格步骤条(源码)
06-20
html实现多种风格步骤条，步骤条源码，源码下载，格子风步骤条，花式风步骤条，进度风步骤条，线性风步骤条四种步骤条，代码独立，可以直接使用。也可直接预览效果。 效果演示地址： https://blog.csdn.net/weixin_43151418/article/details/131308246
审批流程html.zip
03-08
使用html+css+js实现流程图设计，无需其他任何插件，可随意在任何位置添加节点或者条件，操作方便，无需定位。
html进度条实现原理,多步骤进度条的实现原理及代码
weixin_39917894的博客
05-30 291
今天在工作的时候写了一个多步骤进度条的代码，在此跟大家分享一下！效果图：代码展示：stepul,li{list-style:none;}.flow_steps{height:55px;width:1000px;margin:100px auto;}.flow_steps .steps{padding-left:0;}.flow_steps ul li { float:left; height:5...
html、css、js实现步骤条(学习篇)
skyblue_afan的博客
03-07 3380
html，css，js实现步骤条
纯css写的步骤条
weixin_30865427的博客
05-07 498
步骤条很常见，但是网上很多都不太智能，不适合放在手机上的步骤条，应一位朋友的求帮忙，故写了一个可以加任意多个步骤，宽度仍然等比，超过屏幕还可以滑动的步骤条ui。具体展示如下： 于若需要请移步我的github，按照自己的需求自行修改。其中横向滑动可以参加另外一篇文章 ：css如何实现滚动条隐藏但鼠标仍然可以滚动 转载于:https://www.cnblogs.com/erduyang/p/68...
html进度条实现原理,html+css进度条实现
weixin_35572076的博客
05-30 748
HTML代码HTML的代码非常简单，只要为进度条提供一个容器就可以了。基本的HTML代码如下：LoadingPlease wait...(By:www.jiawin.com)CSS样式表接下来是为我们的进度条定义样式，这里主要运用了CSS3的linear-gradient的渐变属性、border-radius的圆角属性、box-shadow的阴影属性等等，来制作出进度条的初步模型。完成进度条的模型...
html流程进度效果,如何用html/css实现简历中的技能进度效果 如图
weixin_33341108的博客
06-04 113
我是通过写把圆弧分解为4个正方形定位在四个角然后根据百分比来对四个正方形进行显示或隐藏以及旋转角度来达到显示效果HTML25%50%70%90%CSS.circle-level {display: inline-block;position: relative;width: 200px;height: 200px;background: #CCC;border-radius: 50%;overfl...
使用HTML+CSS 实现箭头流程步骤条-真实业务需求
明哥
03-21 1647
效果图： 具体实现效果代码如下 HTML <div class="container"> <div class="navs"> <ul> <li class="active">第一步</li> <li>第二步</li> <li>第三步</li> <li>第
如何在HTML中设计步骤进度条,使用纯CSS制作步骤进度条
weixin_39938165的博客
06-05 899
步骤进度条的使用场景很多，比如说购物流程 、订单流程、面试流程等都要用到它。网上常见的做法是使用CSS图片精灵，该做法的优点是兼容性强，但缺点也很明显：难以自适应设备，而且会加载额外的 图片资源。有没有更好一点的办法呢？下面实例将使用纯CSS来制作面试步骤进度条。其实现方法很简单，只需使用:before选择器在每一步对应li元素添加圆形步骤数字，使用:after选择器在其后面添加连接线。步骤进度条...
编写一个HTML5+JavaScript+CSS实现的模仿Windows上的“扫雷”小游戏
最新发布
09-08
为了实现这个模仿Windows上的“扫雷”小游戏，你可以使用HTML5，JavaScript和CSS。 首先，使用HTML5编写游戏的骨架，创建一个用于显示游戏的表格。接下来，使用JavaScript编写游戏的逻辑，包括生成地图，判断点击...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值