按鈕掃光
滑鼠移入觸發懸浮時一道高光斜掃過按鈕，電商與營銷頁常見。
把滑鼠移到方塊上
這一條靠
: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);
}