代码改变世界

简单的CSS圆形缩放动画

2018-01-31 22:15  龙恩0707  阅读(1782)  评论(0)  编辑  收藏  举报

简单的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>