跳到主要内容

悬浮抬升

鼠标悬浮触发

鼠标移入时元素上浮、阴影加深,卡片与按钮最常用的悬浮反馈。

把鼠标移到方块上
这一条靠 :hover 触发,页面加载时不会自己播。鼠标移上去、再移开就能来回看。
参数调节
交互类动画由鼠标状态驱动,时长与缓动写在规则里的 transition / animation 上,改成下方代码里的数值即可。
完整代码
/* 悬浮抬升 */
.anim-hover-lift {
  transition: transform .28s cubic-bezier(.22,.61,.36,1), box-shadow .28s cubic-bezier(.22,.61,.36,1);
}
.anim-hover-lift:hover {
  transform: translateY(-8px);
  box-shadow: 0 14px 28px rgba(15,23,42,.18);
}