简单的CSS圆形缩放动画

话不多说鼠标移动上去，看效果吧，效果预览
代码如下：
<!DOCTYPE html>

<html>

  <head>

    <title>css圆形缩放动画</title>

    <style>

      .circular {

        position: relative;

        width: 48px;

        height: 48px;

      }

      .circular i {

        position: absolute;

        top: 0;

        left: 0;

        width: 48px;

        height: 48px;

      }

      .circular i:before {

        content: '';

        border-radius: 50%;

        position: absolute;

        top: 0;

        left: 0;

        right: 0;

        bottom: 0;

        background-color: #20a839;

      }

      .circular i:after {

        content: '';

        transition: all .3s;

        border-radius: 50%;

        position: absolute;

        top: 0;

        left: 0;

        right: 0;

        bottom: 0;

        transform: scale(0);

        background-color: #30cc54;

      }

      .circular:hover i:after {

        transform: scale(1);

      }

    </style>

  </head>

  <body>

    <div class="circular">

      <i></i>

    </div>

  </body>

</html>