跳到主要內容

懸浮掃光

滑鼠移入觸發

一道斜向高光從左側掃過,常用於按鈕與卡片。

把滑鼠移到方塊上
這一條靠 :hover 觸發,頁麵載入時不會自己播。滑鼠移上去、再移開就能來回看。
參數調節
交互類動畫由滑鼠狀態驅動,時長與緩動寫在規則裡的 transition / animation 上,改成下方代碼裡的數值即可。
完整代碼
/* 懸浮掃光 */
.anim-hover-shine {
  position: relative;
  overflow: hidden;
}
.anim-hover-shine::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent);
  transform: translateX(-120%) skewX(-20deg);
  transition: transform .6s ease;
  pointer-events: none;
}
.anim-hover-shine:hover::after {
  transform: translateX(120%) skewX(-20deg);
}