原文地址：https://vien.tech/article/154

CSS實(shí)現(xiàn)鼠標(biāo)移動(dòng)到圖片或按鈕上緩慢變大，添加過(guò)渡動(dòng)畫效果，自定義動(dòng)畫時(shí)間。鼠標(biāo)指向元素，元素變大CSS示例。

效果示例

這里是一個(gè)效果示例： https://findcatsname.com/cats-do-know-their-own-names

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

可以看到，中間的按鈕變大了。當(dāng)然，圖片看不出動(dòng)畫效果，大家可以自己去站點(diǎn)查看（好吧，我承認(rèn)，這是我的站，想騙你進(jìn)去，哈哈）。

實(shí)現(xiàn)代碼

接下來(lái)我們就來(lái)用css實(shí)現(xiàn)這個(gè)樣式

這是三個(gè)按鈕

<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 定義的是過(guò)渡動(dòng)畫效果時(shí)間， transform 定義的是放大的倍數(shù)。而 :hover 則定義鼠標(biāo)滑過(guò)事件。

當(dāng)然，你會(huì)發(fā)現(xiàn)，這些代碼跟展示的示例不一樣。不要擔(dān)心、因?yàn)橐恍┡c本教程無(wú)關(guān)的樣式我省去了。要做出什么炫酷的樣式、請(qǐng)你自己定義哦。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論