跳到主要内容

按钮描边生长

鼠标悬浮触发

悬浮时描边从中心放大浮现,适合次级主行动按钮。

把鼠标移到方块上
这一条靠 :hover 触发,页面加载时不会自己播。鼠标移上去、再移开就能来回看。
参数调节
交互类动画由鼠标状态驱动,时长与缓动写在规则里的 transition / animation 上,改成下方代码里的数值即可。
完整代码
/* 按钮描边生长 */
.anim-btn-border-draw {
  position: relative;
}
.anim-btn-border-draw::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid #93c5fd;
  border-radius: inherit;
  transform: scale(.8);
  opacity: 0;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), opacity .3s ease;
  pointer-events: none;
}
.anim-btn-border-draw:hover::before {
  transform: scale(1.16);
  opacity: 1;
}