原文地址：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)。