Hover
从中间往两边回中间
CSS
CSS Hover
线条展开、背景扫过、形变与边框过渡等常用 Hover 动效合集。
简介
常用 CSS Hover 效果合集，覆盖下划线展开、背景扫过、形变过渡与边框涟漪等交互反馈，可直接用于按钮与链接。
特征
- 纯 CSS 实现，无依赖
- 覆盖线条 / 背景扫过 / 形变过渡 / 边框共 70+ 种效果
- 适合按钮、导航、卡片等悬停反馈
Hover Line
Hover
从左往右回左
Hover
从右往左回右
Hover
从左进入从右消失
Hover
从右进入从左消失
Hover
从上进入从上消失
Hover
从上进入从下消失
Hover Background
Hover
从左往右回左
Hover
从左往右回左2
Hover
从右往左回右
Hover
从上往下回上
Hover
从上往下回下
Hover
从下往上回下
Hover
从下往上回上
Hover
从中间往两边回左
Hover
从中间往两边回右
Hover
从左往右消失在中间
Hover
从右往左消失在中间
Hover
从左进入从右消失
Hover
从右进入从左消失
Hover
从中间往两边回中间消失
Hover
从左上角进入左上角消失
Hover
从左上角进入右上角消失
Hover
从左上角进入右下角消失
Hover
从左上角进入左下角消失
Hover
从左下角进入左上角消失
Hover
从左下角进入右上角消失
Hover
从左下角进入右下角消失
Hover
从左下角进入左下角消失
Hover
从右上角进入左上角消失
Hover
从右上角进入右上角消失
Hover
从右上角进入右下角消失
Hover
从右上角进入左下角消失
Hover
从右下角进入左上角消失
Hover
从右下角进入右上角消失
Hover
从右下角进入右下角消失
Hover
从右下角进入左下角消失
Hover
从顶部中间进入底部中间消失
Hover
从顶部中间进入左下角消失
Hover
从顶部中间进入右下角消失
VIC
从底部中间进入顶部中间消失
LOVE
从底部中间进入左上角消失
Hover
从底部中间进入右上角消失
Hover Background Transitions
Hover
Hover
Pulse Grow
Pulse Grow
Pulse Shrink
Pulse Shrink
Push
Push
Pop
Pop
Skew
Skew
Skew Forward
Skew Forward
Wobble Horizontal
Wobble Horizontal
Wobble Vertical
Wobble Vertical
Wobble To Bottom Right
Wobble To Bottom Right
Wobble To Top Right
Wobble To Top Right
Wobble Top
Wobble Top
Wobble Bottom
Wobble Bottom
Rectangle Out
Rectangle Out
Rectangle In
Rectangle In
Radial Out
Radial Out
Radial In
Radial In
Shutter In Horizontal
Shutter In Horizontal
Shutter Out Horizontal
Shutter Out Horizontal
Shutter In Vertical
Shutter In Vertical
Shutter Out Vertical
Shutter Out Vertical
Hover Border Transitions
Trim
Trim
Ripple Out
Ripple Out
Ripple Out
Ripple Out
Ripple In
Ripple In
Round Corners
Round Corners
Hover
Border Grow
Hover
Corner Expand
Hover
Edge Expand
Hover
Four Borders
Hover
Four Borders 2
Hover
Border Fill
Hover
Four Borders 3