簡單的css縮放動畫,仿騰訊新聞的分享按鈕和美團app底部的圖標樣式

最近看到一些好看的hover的圖形縮放效果。而後本身就寫了下，發現這2種效果都不錯。若是夥伴們更好的實現方式能夠在下面留言哦~

還有美團的效果，我就不展現了，喜歡的能夠去app應用上看看。

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

    <!--騰訊新聞效果-->
    <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標籤實現點擊跳轉，我這裏設置不跳轉，i標籤使用僞元素表明前景色和背景色，僞元素定位在裏面，而後用縮放屬性，在僞元素後面放過渡效果

.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;
}

美團app仿效果：css,直接在i標籤裏放背景圖片，設置僞元素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;
}