使用Jquery,CSS3实现像GooglePlus那样的圆圈效果

  我们要实现像Google+ 那样圆圈效果, 不使用图片.这里只使用CSS3与JQuery, 先定义CSS:
   1:  <style type="text/css">
   2:  div.circle {
   3:      margin: 100px auto;
   4:      width:200px;
   5:      height:200px;
   6:  }
   7:  div.outer.hover {
   8:      -moz-transform: scale(1.45);
   9:      -webkit-transform: scale(1.45);
  10:      transform: scale(1.45);
  11:  }
  12:  
  13:  div.outer{
  14:      position:absolute;
  15:      z-index:800;
  16:      -webkit-transition: all .2s ease-in-out;
  17:      -moz-transition: all .2s ease-in-out;
  18:      -o-transition: all .2s ease-in-out;
  19:      transition: all .2s ease-in-out;
  20:       background:transparent;
  21:      width:122px;
  22:      height:122px;
  23:      -webkit-border-radius: 61px;
  24:      -moz-border-radius: 61px;
  25:      border-radius: 61px;
  26:      border:1px solid #aaaaaa;
  27:  }
  28:  div.middle
  29:   {
  30:       margin:1px;
  31:      width:122px;
  32:      height:122px;
  33:      -webkit-border-radius: 61px;
  34:      -moz-border-radius: 61px;
  35:      border-radius: 61px;
  36:      background: #ececec;
  37:     z-index:900;
  38:       -webkit-transition: all .2s ease-in-out;
  39:      -moz-transition: all .2s ease-in-out;
  40:      -o-transition: all .2s ease-in-out;
  41:      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ececec', endColorstr='#d8d8d8',GradientType=0 );
  42:      background: linear-gradient(top, #ececec 0%,#d8d8d8 100%);
  43:       position:absolute;
  44:    
  45:      transition: all .2s ease-in-out;