跳到主要内容

按钮扫光

鼠标悬浮触发

悬浮时一道高光斜扫过按钮,电商与营销页常见。

把鼠标移到方块上
这一条靠 :hover 触发,页面加载时不会自己播。鼠标移上去、再移开就能来回看。
参数调节
交互类动画由鼠标状态驱动,时长与缓动写在规则里的 transition / animation 上,改成下方代码里的数值即可。
完整代码
/* 按钮扫光 */
.anim-btn-shine {
  position: relative;
  overflow: hidden;
}
.anim-btn-shine::after {
  content: '';
  position: absolute;
  top: -50%;
  left: 0;
  width: 60%;
  height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent);
  transform: translateX(-160%) rotate(18deg);
  transition: transform .65s ease;
  pointer-events: none;
}
.anim-btn-shine:hover::after {
  transform: translateX(260%) rotate(18deg);
}