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

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

效果示例

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

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

可以看到，中間的按鈕變大了。當然，圖片看不出動畫效果，大家可以自己去站點查看（好吧，我承認，這是我的站，想騙你進去，哈哈）。

實現(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 則定義鼠標滑過事件。

當然，你會發(fā)現(xiàn)，這些代碼跟展示的示例不一樣。不要擔心、因為一些與本教程無關的樣式我省去了。要做出什么炫酷的樣式、請你自己定義哦。

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

最新評論