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>
相关推荐
北海-cherish2 小时前
vue中的 watchEffect、watchAsyncEffect、watchPostEffect的区别
前端·javascript·vue.js
2501_915909063 小时前
HTML5 与 HTTPS,页面能力、必要性、常见问题与实战排查
前端·ios·小程序·https·uni-app·iphone·html5
white-persist4 小时前
Python实例方法与Python类的构造方法全解析
开发语言·前端·python·原型模式
新中地GIS开发老师5 小时前
Cesium 军事标绘入门:用 Cesium-Plot-JS 快速实现标绘功能
前端·javascript·arcgis·cesium·gis开发·地理信息科学
Superxpang5 小时前
前端性能优化
前端·javascript·vue.js·性能优化
Rysxt_5 小时前
Element Plus 入门教程:从零开始构建 Vue 3 界面
前端·javascript·vue.js
隐含5 小时前
对于el-table中自定义表头中添加el-popover会弹出两个的解决方案,分别针对固定列和非固定列来隐藏最后一个浮框。
前端·javascript·vue.js
大鱼前端5 小时前
Turbopack vs Webpack vs Vite:前端构建工具三分天下,谁将胜出?
前端·webpack·turbopack
你的人类朋友5 小时前
先用js快速开发,后续引入ts是否是一个好的实践?
前端·javascript·后端