原文地址:https://vien.tech/article/154
CSS實現(xiàn)鼠標(biāo)移動到圖片或按鈕上緩慢變大,添加過渡動畫效果,自定義動畫時間。鼠標(biāo)指向元素,元素變大CSS示例。
效果示例
這里是一個效果示例: https://findcatsname.com/cats-do-know-their-own-names

我們可以看到頁面頂部和底部都有分享的按鈕。然后我把鼠標(biāo)移動到其中一個按鈕上:

可以看到,中間的按鈕變大了。當(dāng)然,圖片看不出動畫效果,大家可以自己去站點查看(好吧,我承認(rèn),這是我的站,想騙你進(jìn)去,哈哈)。
實現(xiàn)代碼
接下來我們就來用css實現(xiàn)這個樣式
這是三個按鈕
<button class="btn-share">Twitter</button><button class="btn-share">Pinterest</button><button class="btn-share" >Facebook</button>
這是css樣式:
.btn-share { transition: all 0.3s;}.btn-share:hover { transform: scale(1.3);}transition 定義的是過渡動畫效果時間, transform 定義的是放大的倍數(shù)。而 :hover 則定義鼠標(biāo)滑過事件。
當(dāng)然,你會發(fā)現(xiàn),這些代碼跟展示的示例不一樣。不要擔(dān)心、因為一些與本教程無關(guān)的樣式我省去了。要做出什么炫酷的樣式、請你自己定義哦。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持武林網(wǎng)。
新聞熱點
疑難解答