鼠标移入动画

功能说明

• 页面按原文档分组展示可用的 hover 动画 class
• 把鼠标移到类名块上，可以直接看到真实 hover 效果
• 点击类名块会复制对应 class 名

动效预览

点击下方任意 class 块即可复制对应 class 名。

2D过度

gdhvr-grow

gdhvr-shrink

gdhvr-pulse

gdhvr-pulse-grow

gdhvr-pulse-shrink

gdhvr-push

gdhvr-pop

gdhvr-bounce-in

gdhvr-bounce-out

gdhvr-rotate

gdhvr-grow-rotate

gdhvr-float

gdhvr-sink

gdhvr-bob

gdhvr-hang

gdhvr-skew

gdhvr-skew-forward

gdhvr-skew-backward

gdhvr-wobble-vertical

gdhvr-wobble-horizontal

gdhvr-wobble-to-bottom-right

gdhvr-wobble-to-top-right

gdhvr-wobble-top

gdhvr-wobble-bottom

gdhvr-wobble-skew

gdhvr-buzz

gdhvr-buzz-out

gdhvr-forward

gdhvr-backward

背景转换

gdhvr-fade

gdhvr-back-pulse

gdhvr-sweep-to-right

gdhvr-sweep-to-left

gdhvr-sweep-to-bottom

gdhvr-sweep-to-top

gdhvr-bounce-to-right

gdhvr-bounce-to-left

gdhvr-bounce-to-bottom

gdhvr-bounce-to-top

gdhvr-radial-out

gdhvr-rectangle-out

gdhvr-shutter-out-horizontal

gdhvr-shutter-out-vertical

边界过渡

gdhvr-border-fade

gdhvr-hollow

gdhvr-trim

gdhvr-ripple-out

gdhvr-ripple-in

gdhvr-outline-out

gdhvr-outline-in

gdhvr-round-corners

gdhvr-underline-from-left

gdhvr-underline-from-center

gdhvr-underline-from-right

gdhvr-overline-from-left

gdhvr-overline-from-center

gdhvr-overline-from-right

gdhvr-reveal

gdhvr-underline-reveal

gdhvr-overline-reveal

阴影和光晕过渡

gdhvr-glow

gdhvr-shadow

gdhvr-grow-shadow

gdhvr-box-shadow-outset

gdhvr-box-shadow-inset

gdhvr-float-shadow

gdhvr-shadow-radial

语音气泡 注意:背景颜色为#e1e1e1使用

gdhvr-bubble-top

gdhvr-bubble-right

gdhvr-bubble-bottom

gdhvr-bubble-left

gdhvr-bubble-float-top

gdhvr-bubble-float-right

gdhvr-bubble-float-bottom

gdhvr-bubble-float-left

卷曲

gdhvr-curl-top-left

gdhvr-curl-top-right

gdhvr-curl-bottom-right

gdhvr-curl-bottom-left

使用建议

• 直接把复制得到的 class 名加到目标元素上
• 先在局部入口按钮、卡片、面板标题上试用，再决定是否全局铺开
• 语音气泡类动画建议配合浅灰背景使用