動畫效果展示

鼠標懸停時，一個帶有圓角的水綠色邊框會從右上和左下兩個方向快速展開，隨后顏色緩慢填充；移出鼠標時顏色先褪去，邊框再快速收縮消失，形成具有節奏感的呼吸式動畫。

📜 動畫原理說明

一、核心機制

通過 雙偽元素(::before/::after) 模擬邊框，利用 CSS過渡(transition) 實現尺寸和顏色的動畫聯動。鼠標移入時觸發展開動畫，移出時逆向執行形成淡出。

二、 原理

設置兩個偽元素盒子，width/height控制這兩個盒子長寬

1. width/height 的作用

• 控制偽元素 容器的整體尺寸（矩形區域）
• 擴展方向由 top/right/bottom/left 定位決定

2. 每個偽元素 僅激活兩條相鄰邊框，形成直角連接；未激活的邊框保持 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;
}