css矩形盒子实现虚线流动边框+css实现step连接箭头

由于项目里需要手写步骤条且实现指定状态边框虚线流动效果，故使用css去绘制步骤条连接箭头和绘制边框流动效果

效果：在这里插入图片描述

1.绘制步骤条连接箭头

    <ul class="process-list"><div v-for="(process, index) in processes" :key="index" class="flex items-center item-box"><li :class="active==process.id?'active':''"><span class="process-name">{{ process.name }}</span></li><div class="arrow"></div></div></ul>

// 绘制连接线
.arrow {display:inline-block;height:2px;width:80px;background-color:#909399;position:relative;margin-left: 10px;margin-right: 20px;
}
// 绘制箭头
.arrow:before {position:absolute;content:"";width:0;height:0;border:6px solid transparent;border-left:6px solid #909399;left:100%;top:50%;transform: translateY(-50%);
}

2.绘制流动虚线边框

  .process-item.active {color: #000;background-color: rgba(144, 147, 153, 0.2);position: relative;z-index: 2;background: linear-gradient(90deg, #2671e2 50%, transparent 0) repeat-x,linear-gradient(90deg, #2671e2 50%, transparent 0) repeat-x,linear-gradient(0deg, #2671e2 50%, transparent 0) repeat-y,linear-gradient(0deg, #2671e2 50%, transparent 0) repeat-y;background-color: rgba(144, 147, 153, 0.2);background-size: 8px 2px, 8px 2px, 2px 8px, 2px 8px;background-position: 0 0, 0 100%, 0 0, 100% 0;animation: linearGradientMove 0.3s infinite linear;}// 虚线动画@keyframes linearGradientMove {100% {background-position: 8px 0, -8px 100%, 0 -8px, 100% 8px;}}