css 步骤条虚线渐变色效果实现

效果如图所示:

思路:

使用元素覆盖的方式实现视觉上虚线的效果

实现代码:

html布局

html 复制代码
<ul class="details-cont">
    <li class="details-li" v-for="item in 3" :key="item">
        <div class="li-status">{{ item }}</div>
        <div class="li-flow-box">
            <div class="flow-circle"></div>
            <div class="flow-line"></div>
            <div class="flow-line-other"></div>
        </div>
        <div class="li-details">
            <div class="details-top">文字</div>
            <div class="details-channel">文字文字文字</div>
            <div class="details-stream">文字文字文字文字</div>
        </div>
    </li>
</ul>

css样式

css 复制代码
.details-cont{
    padding: 0 rem(24);
    .details-li{
        display: flex;
        padding-bottom: rem(20);
        .li-flow-box{
            position: relative;
            padding: rem(5) 0 0;
            .flow-circle{
                width: rem(8);
                height: rem(8);
                border-radius: 50%;
                margin: 0 rem(7) 0 rem(5);
                background: #D7D7D7;
            }
            .flow-line{
                position: absolute;
                left: rem(9);
                top: rem(13);
                bottom: rem(-23);
                width: 1px;
                border-left: 1px dashed #D7D7D7;
            }
        }
        .li-details{
            flex: 1;
            font-size: rem(12);
            color: #999999;
            line-height: 18px;
            .details-channel,.details-stream{
                padding: rem(6) 0 0;
            }
        }
    }
    .details-li:last-child{
        .li-flow-box{
            .flow-line-other{
                position: absolute;
                left: rem(9);
                top: rem(13);
                bottom: rem(-23);
                width: 1px;
                border-left: 1px dashed #fff;
            }
            .flow-line{
                border-image: linear-gradient(180deg, rgba(215, 215, 215, 1), rgba(237, 237, 237, 0.49), rgba(215, 215, 215, 0)) 1 1
                
            }
        }
    }
}

PS:因为在移动端使用,单位代码使用统一的方法对rem进行了处理,此处rem(1),就相当于1px,

相关推荐
翻滚吧键盘4 分钟前
vue绑定一个返回对象的计算属性
前端·javascript·vue.js
秃了也弱了。23 分钟前
Chrome谷歌浏览器插件ModHeader,修改请求头,开发神器
前端·chrome
乆夨(jiuze)43 分钟前
记录H5内嵌到flutter App的一个问题,引发后面使用fastClick,引发后面input输入框单击无效问题。。。
前端·javascript·vue.js
忧郁的蛋~1 小时前
HTML表格导出为Excel文件的实现方案
前端·html·excel
小彭努力中1 小时前
141.在 Vue 3 中使用 OpenLayers Link 交互:把地图中心点 / 缩放级别 / 旋转角度实时写进 URL,并同步解析显示
前端·javascript·vue.js·交互
然我1 小时前
别再只用 base64!HTML5 的 Blob 才是二进制处理的王者,面试常考
前端·面试·html
NanLing1 小时前
【纯前端推理】纯端侧 AI 对象检测:用浏览器就能跑的深度学习模型
前端
呆呆的心1 小时前
前端必学:从盒模型到定位,一篇搞定页面布局核心 🧩
前端·css
小飞悟1 小时前
前端高手才知道的秘密:Blob 居然这么强大!
前端·javascript·html
小old弟1 小时前
用Sass循环实现炫彩文字跑马灯效果
前端