当前位置：首页 > news >正文

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

news 来源：原创 2025/6/12 19:16:08

动画效果展示

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

📜 动画原理说明

一、核心机制

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

二、原理

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

width/height 的作用

控制伪元素容器的整体尺寸（矩形区域）
扩展方向由 top/right/bottom/left 定位决定

每个伪元素仅激活两条相邻边框，形成直角连接；未激活的边框保持 transparent（透明）

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

其中一个伪元素盒子：
在这里插入图片描述

三、代码

.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;
}