跳到主要內容

按鈕漸層流動

滑鼠移入觸發

懸浮時背景漸層橫向推過去,色彩更有流動感。

把滑鼠移到方塊上
這一條靠 :hover 觸發,頁麵載入時不會自己播。滑鼠移上去、再移開就能來回看。
參數調節
交互類動畫由滑鼠狀態驅動,時長與緩動寫在規則裡的 transition / animation 上,改成下方代碼裡的數值即可。
完整代碼
/* 按鈕漸層流動 */
.anim-btn-gradient {
  background-image: linear-gradient(90deg, #2563eb, #7c3aed, #2563eb);
  background-size: 200% 100%;
  background-position: 0% 0;
  transition: background-position .5s ease;
}
.anim-btn-gradient:hover {
  background-position: 100% 0;
}