文章来源地址https://www.toymoban.com/news/detail-626057.html
文章来源：https://www.toymoban.com/news/detail-626057.html
/* Hover 边线流动 */
.hoverDrawLine {
border: 0 !important;
position: relative;
border-radius: 5px;
--border-color: #60daaa;
}
.hoverDrawLine::before,
.hoverDrawLine::after {
box-sizing: border-box;
content: '';
position: absolute;
border: 2px solid transparent;
border-radius: 5px;
width: 0;
height: 0;
}
.hoverDrawLine::before {
top: 0;
left: 0;
-webkit-transition: height 0.25s ease-out 0.5s, width 0.25s ease-out 0.75s,
border-color 0s ease-in-out 1s;
transition: height 0.25s ease-out 0.5s, width 0.25s ease-out 0.75s,
border-color 0s ease-in-out 1s;
}
.hoverDrawLine::after {
bottom: 0;
right: 0;
-webkit-transition: height 0.25s ease-out 0s, width 0.25s ease-out 0.25s,
border-color 0s ease-in-out 0.5s;
transition: height 0.25s ease-out 0s, width 0.25s ease-out 0.25s,
border-color 0s ease-in-out 0.5s;
}
.hoverDrawLine:hover::before,
.hoverDrawLine:hover::after {
width: 100%;
height: 100%;
}
.hoverDrawLine:hover::before {
border-top-color: var(--border-color);
border-right-color: var(--border-color);
-webkit-transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
}
.hoverDrawLine:hover::after {
border-bottom-color: var(--border-color);
border-left-color: var(--border-color);
-webkit-transition: width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
transition: width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
}
<div class="hoverDrawLine"></div>到了这里，关于css3 hover border 流动效果的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
