最近看到一些好看的hover的圖形縮放效果。然后自己就寫了下，發(fā)現(xiàn)這2種效果都不錯。如果伙伴們更好的實現(xiàn)方式可以在下面留言哦~

還有美團(tuán)的效果，我就不展示了，喜歡的可以去app應(yīng)用上看看。

這兩種效果，其實實現(xiàn)的原理是一樣的，就是用偽類選擇器改變背景大小/圖片大小。加一個過渡

<!--騰訊新聞效果--><a href="javascript:void(0);" class="hover-body hover-body-weixin"><i></i><span></span></a><!--美圖APP效果--><a href="javascript:void(0);" class="hover-body-app third-party-app"><i></i></a>

騰訊新聞小logo:外部的a標(biāo)簽實現(xiàn)點(diǎn)擊跳轉(zhuǎn)，我這里設(shè)置不跳轉(zhuǎn)，i標(biāo)簽使用偽元素代表前景色和背景色，偽元素定位在里面，然后用縮放屬性，在偽元素后面放過渡效果

.hover-body {position: relative;display: inline-block;width: 48px;height: 48px; }.hover-body:hover i::after {transform: scale(1); }.hover-body span {position: relative;display: block;width: 48px;height: 48px;background-size: 30px;background-position: center;background-repeat: no-repeat; }.hover-body i {position: absolute;top: 0;left: 0;width: 48px;height: 48px; }.hover-body i::before {content: '';border-radius: 50%;position: absolute;top: 0;left: 0;right: 0;bottom: 0; }.hover-body i::after {content: '';transition: all .3s;border-radius: 50%;position: absolute;top: 0;left: 0;right: 0;bottom: 0;transform: scale(0); }.hover-body.hover-body-weixin span {background-image: url(index.png); }.hover-body.hover-body-weixin i::before {background-color: pink; }.hover-body.hover-body-weixin i::after {background-color: palegoldenrod; }

美團(tuán)app仿效果：css,直接在i標(biāo)簽里放背景圖片，設(shè)置偽元素before和after為2張圖片，給圖片放大小，加過渡

.hover-body-app{position: relative;display: inline-block;width: 48px;height: 48px;margin-left: 6%;margin-right: 6%; } .hover-body-app:hover i::after{transform: scale(1); }.hover-body-app i{position: absolute;top: 0;left: 0;width: 48px;height: 48px; } .hover-body-app i::before{content: '';border-radius: 50%;position: absolute;top: 0;left: 0;right: 0;bottom: 0; } .hover-body-app i::after {content: '';transition: all .3s;border-radius: 50%;position: absolute;top: 0;left: 0;right: 0;bottom: 0;transform: scale(0); }.hover-body-app.third-party-app i::before {background: url(index.png);background-size: 30px;background-position: center;background-repeat: no-repeat; }.hover-body-app.third-party-app i::after {background: url(indexfull.png);background-size: 30px;background-position: center;background-repeat: no-repeat; }
更多專業(yè)前端知識，請上 【猿2048】www.mk2048.com

總結(jié)

以上是生活随笔為你收集整理的简单的css缩放动画,仿腾讯新闻的分享按钮和美团app底部的图标样式的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。