近在做公司的登錄頁，UE同學(xué)希望第三方登錄的圖標(biāo)在hover的時(shí)候有一個(gè)圓形的縮放效果（原話是波紋效果-_-||），效果參考騰訊新聞和網(wǎng)易新聞的分享按鈕。

• 騰訊新聞的分享按鈕hover效果（新聞頁面）：

• 網(wǎng)易新聞的分享按鈕hover效果（新聞頁面）：

文章分享之前小編推薦一下我的前端學(xué)習(xí)群：611256580，里面都是學(xué)習(xí)前端的，如果你想制作酷炫的網(wǎng)頁，想學(xué)習(xí)前端知識，小編歡迎你的加入。小編會在群中不定期分享干貨源碼，包括我精心整理的一份前端教程。歡迎各位感興趣的的小伙伴。

看了一下這兩個(gè)頁面的源碼，主要是用了 transform:scale() 和 transition ，自己的最終的實(shí)現(xiàn)效果如下：

實(shí)現(xiàn)思路大體是模仿網(wǎng)易新聞的，布局如下：

<a href="" class="third-party third-party-weixin"> <i></i>
<span></span>
</a>

外層的a標(biāo)簽用于整體容器和跳轉(zhuǎn)，內(nèi)層的i標(biāo)簽使用偽元素::before和::after分別作為背景色和前景色，這兩個(gè)偽元素均絕對定位，垂直水平居中，::after設(shè)置縮放屬性 transform:scale(0) ,過渡動(dòng)畫屬性 transition: all .3s ，正常情況下::before可見，當(dāng)hover的時(shí)候::after設(shè)置縮放屬性 transform:scale(1) ，兩個(gè)相鄰絕對定位元素在不設(shè)置z-index的情況下，文檔流在后的元素在上，并且在有過渡動(dòng)畫屬性 transition 的情況下實(shí)現(xiàn)了縮放動(dòng)畫效果。

span標(biāo)簽用于展示logo，可以是圖片或者web字體，只要透明就可以，這里用了圖片。 CSS（此處使用的是sass）如下：

.third-party { position: relative; // 為了兼容firefox必須要變成block或inline-block
display: inline-block; width: 48px; height: 48px; margin: {
left: 6%; right: 6%;
}
&:hover { i {
&::after { transform: scale(1);
}
}
} span { // position: relative是為了兼容firefox和IE
position: relative; display: block; width: 48px; height: 48px; background-size: 30px; background-position: center; background-repeat: no-repeat;
} i { position: absolute; top: 0; left: 0; width: 48px; height: 48px;
&::before { content: ''; border-radius: 50%; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
}
&::after { content: ''; transition: all .3s; border-radius: 50%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; transform: scale(0);
}
}
&.third-party-weixin { span { background-image: url(../images/login/weixin-64.png);
} i {
&::before { background-color: #20a839;
}
&::after { background-color: #30cc54;
}
}
}
}

這樣這個(gè)簡單的圓形縮放動(dòng)畫就完成啦。