iT邦幫忙

2021 iThome 鐵人賽

DAY 26
0
自我挑戰組

前進切版之路! CSS微體驗系列 第 26

【踩坑】按鈕閃阿閃,gradient 在 hover 時閃爍

某天在閒逛網站,美其名觀察各種生態,實則打混摸魚的時候
發現按鈕在 hover 過渡時出現閃爍的狀況
(在一瞬間可以看到背景顏色)

經過研究之後發現是「漸層切換到純色」之間才會產生的狀況

雖然這樣一閃一閃的好像頗帶感的...但貓毛的就是覺得眼睛好痛啊 ‵。゚ヽ(゚´Д‵)ノ゚。

研究之後發現是 transition 所造成的過渡閃爍

如果沒有需要動畫過度效果的話直接拿掉trasition 就不會閃呀閃了,但如果需要的話就會很奇怪...
看起來就是醜阿!醜!!

.s-btn-1{ 
  background: linear-gradient(to left, #8a2387, #e94057, #f27121);
/*   transition: .5s; */
}
.s-btn-1:hover{  
  background: linear-gradient(to left, #8a2387, #8a2387, #8a2387);
  box-shadow: 0 2px 10px rgba(0,0,0,0.5);
  transform:translateY(-10%);
}

假如說要有要緩緩上升的感覺,該怎麼辦呢...?(›´ω`‹ )

只好土法煉鋼了!!!

解:純色改成偽漸層... (́◉◞౪◟◉‵)

嘿嘿,這樣看起來就好多了呢~

.s-btn-2{ 
  background: linear-gradient(to left, #3494e6, #3494e6); 
  transition: .5s;
}
.s-btn-2:hover{  
     background: linear-gradient(to left, #3494e6, #ec6ead); 
     box-shadow: 0 2px 10px rgba(0,0,0,0.5);
     transform:translateY(-10%);
}

(巴頭)

老實說,不懂transition之前的我的確是這樣解決的...(遮臉)

懂了transition之後就知道只需要加入

transition: background-image .5s, transform .5s;

就可以解決這個問題啦!

歡迎到codepen這邊感受一下transition的奧妙~
https://codepen.io/SealSeal/pen/PomQZbo


上一篇
【心得】不同 gradient 使用方式-- conic-gradient()
下一篇
【心得】border-radius 知多少~
系列文
前進切版之路! CSS微體驗30

尚未有邦友留言

立即登入留言