Css实现悬浮对角线边框动效

动画效果展示

鼠标悬停时,一个带有圆角的水绿色边框会从右上和左下两个方向快速展开,随后颜色缓慢填充;移出鼠标时颜色先褪去,边框再快速收缩消失,形成具有节奏感的呼吸式动画。

📜 动画原理说明

一、核心机制

通过 双伪元素(::before/::after) 模拟边框,利用 CSS过渡(transition) 实现尺寸和颜色的动画联动。鼠标移入时触发展开动画,移出时逆向执行形成淡出。

二、 原理

设置两个伪元素盒子,width/height控制这两个盒子长宽

  1. width/height 的作用
  • 控制伪元素 容器的整体尺寸(矩形区域)
  • 扩展方向由 top/right/bottom/left 定位决定
  1. 每个伪元素 仅激活两条相邻边框,形成直角连接;未激活的边框保持 transparent(透明)
css 复制代码
/* ::before 只显示上+右边框 */
border-top-color: #98e8d5;
border-right-color: #98e8d5;

/* ::after 只显示下+左边框 */
border-bottom-color: #98e8d5;
border-left-color: #98e8d5;

其中一个伪元素盒子:

三、代码

css 复制代码
.hoverDiv {
  /* 为伪元素提供定位基准 */
  position: relative;
  border: 0;
  outline: none;
  box-sizing: border-box;
}

.hoverDiv::before,
.hoverDiv::after {
  /* 子绝父相,伪元素根据父盒子定位 */
  position: absolute;

  box-sizing: inherit;
  content: '';

  /* 初始状态: 尺寸0+边框透明 */
  border: 2px solid transparent;
  width: 0;
  height: 0;
  transition:
    width 0.5s ease-out,
    height 0.5s ease-out,
    border-color 1s ease-out;
}

/* 伪元素定位位置 */
.hoverDiv::before {
  top: 0.1rem;
  right: -0.1rem;
  border-top-right-radius: 20px;
}

.hoverDiv::after {
  bottom: -0.1rem;
  left: -0.1rem;
  border-bottom-left-radius: 20px;
}

/* 伪元素hover效果:尺寸改变 */
.hoverDiv:hover::before,
.hoverDiv:hover::after {
  width: 103%;
  height: 104%;
}

/* 伪元素hover效果: 边框着色 */
.hoverDiv:hover::before {
  border-top-color: #98e8d5;
  border-right-color: #98e8d5;
}

.hoverDiv:hover::after {
  border-bottom-color: #98e8d5;
  border-left-color: #98e8d5;
}
相关推荐
拳打南山敬老院25 分钟前
漫谈 AI + 低代码前景
前端·低代码·aigc
前端拿破轮25 分钟前
平衡二叉树的判断——怎么在O(n)的时间复杂度内实现?
前端·算法·设计模式
LaoZhangAI26 分钟前
ChatGPT图像生成限制重置时间完全指南:24小时滚动窗口机制详解【2025最新】
前端·后端
溪饱鱼26 分钟前
第十五章 SEO的简单免费工具
前端
讨厌吃蛋黄酥33 分钟前
React高手都在用的秘密武器:Fragment的5大逆天功能,让你的性能飙升200%!
前端·javascript·react.js
柒崽37 分钟前
⁤⁤⁤‍‬⁣‌‍⁤‬‬⁤⁢⁣‍⁤⁢⁤‍⁢‬⁡⁡⁡‌⁣⁣⁡告别高额API!手把手教你在本地免费跑AI大模型,详细操作指南!
前端·ai编程
he___H1 小时前
VUE的学习
前端·vue.js·学习
帧栈1 小时前
开发避坑短篇(5):vue el-date-picker 设置默认开始结束时间
前端·vue.js·elementui
1024小神1 小时前
cocos使用脚本创建带昵称跟随的玩家,并解决昵称重影问题
前端·javascript
码上心间1 小时前
时间日期选择器组件进行日期和时间的禁用处理逻辑
前端·javascript·vue.js