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>
相关推荐
brzhang3 小时前
我操,终于有人把 AI 大佬们 PUA 程序员的套路给讲明白了!
前端·后端·架构
止观止3 小时前
React虚拟DOM的进化之路
前端·react.js·前端框架·reactjs·react
goms3 小时前
前端项目集成lint-staged
前端·vue·lint-staged
谢尔登3 小时前
【React Natve】NetworkError 和 TouchableOpacity 组件
前端·react.js·前端框架
Lin Hsüeh-ch'in4 小时前
如何彻底禁用 Chrome 自动更新
前端·chrome
augenstern4166 小时前
HTML面试题
前端·html
张可6 小时前
一个KMP/CMP项目的组织结构和集成方式
android·前端·kotlin
G等你下课6 小时前
React 路由懒加载入门:提升首屏性能的第一步
前端·react.js·前端框架
蓝婷儿7 小时前
每天一个前端小知识 Day 27 - WebGL / WebGPU 数据可视化引擎设计与实践
前端·信息可视化·webgl
然我7 小时前
面试官:如何判断元素是否出现过?我:三种哈希方法任你选
前端·javascript·算法