由于项目里需要手写步骤条 且实现指定状态边框虚线流动效果,故使用css去绘制步骤条连接箭头和绘制边框流动效果文章来源:https://www.toymoban.com/news/detail-722651.html
效果:文章来源地址https://www.toymoban.com/news/detail-722651.html
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;
}
}
到了这里,关于css矩形盒子实现虚线流动边框+css实现step连接箭头的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!