css3 hover border 流动效果

css 复制代码
/* 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;
}
html 复制代码
<div class="hoverDrawLine"></div>
相关推荐
悟能不能悟1 小时前
js闭包问题
开发语言·前端·javascript
秋秋_瑶瑶1 小时前
vue-amap组件呈现的效果图如何截图
前端·javascript·vue-amap
gnip3 小时前
js上下文
前端·javascript
中草药z3 小时前
【Stream API】高效简化集合处理
java·前端·javascript·stream·parallelstream·并行流
不知名raver(学python版)3 小时前
npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR!
前端·npm·node.js
醉方休3 小时前
React中使用DDD(领域驱动设计)
前端·react.js·前端框架
excel3 小时前
📖 小说网站的预导航实战:link 预加载 + fetch + 前进后退全支持
前端
学习3人组3 小时前
React 样式隔离核心方法和最佳实践
前端·react.js·前端框架
世伟爱吗喽4 小时前
threejs入门学习日记
前端·javascript·three.js