使用Jquery,CSS3實現像GooglePlus那樣的圓圈效果

  我們要實現像Google+ 那樣圓圈效果, 不使用圖片.這裡隻使用CSS3與JQuery, 先定義CSS:
   1:  <style type="text/css">
   2:  p.circle {
   3:      margin: 100px auto;
   4:      width:200px;
   5:      height:200px;
   6:  }
   7:  p.outer.hover {
   8:      -moz-transform: scale(1.45);
   9:      -webkit-transform: scale(1.45);
  10:      transform: scale(1.45);
  11:  }
  12:  
  13:  p.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:  p.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;
  46:     background: -moz-linear-gradient(top, #ececec 0%, #d8d8d8 100%);
  47:      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ececec), color-stop(100%,#d8d8d8));
  48:      background: -webkit-linear-gradient(top, #ececec 0%,#d8d8d8 100%);
  49:      background: -o-linear-gradient(top, #ececec 0%,#d8d8d8 100%);
  50:      background: -ms-linear-gradient(top, #ececec 0%,#d8d8d8 100%);
  51:  }
  52:  
  53:  p.middle.hover {
  54:      -moz-transform: scale(1.4);
  55:      -webkit-transform: scale(1.4);
  56:      transform: scale(1.4);
  57:  }
  58:  p.inner
  59:  {
  60:      margin:14px;
  61:  
  62:      background:#3f96d1;
  63:      width:96px;
  64:      height:96px;
  65:  
  66:      font-size:11px;
  67:      color:#FFF;
  68:      line-height:96px;
  69:      text-align:center;
  70:      font-family:Arial;
  71:  
  72:      -webkit-border-radius: 48px;
  73:      -moz-border-radius: 48px;
  74:      border-radius: 48px;
  75:   
  76:      -webkit-box-shadow: inset 0px 1px 1px 0px #575757;
  77:      -moz-box-shadow: inset 0px 1px 1px 0px #575757;
  78:      box-shadow: inset 0px 1px 1px 0px #575757;
  79:  
  80:      border-bottom:1px solid #FFF;
  81:  
  82:      position:absolute;
  83:      z-index:1000;
  84:  
  85:  }
  86:  </style>
引入JQuery:
   1:  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript">
   2:  </script>
   3:  
   4:  <script language="javascript" type="text/javascript">
   5:  $(function() {
   6:      $('p.circle').mouseover(function() {
   7:          $('p.outer').addClass('hover');
   8:          $('p.middle').addClass('hover');
   9:      });
  10:      $('p.circle').mouseout(function() {
  11:          $('p.outer').removeClass('hover');
  12:          $('p.middle').removeClass('hover');
  13:      });
  14:  });
  15:  </script>
目標的HTML片段:
<p class="circle"><p class="outer"></p><p class="middle"></p><p class="inner">Developers code</p></p>
好瞭,運動後效果圖是這樣的:

 GoogleCircleHover

 

您可能先瞭解CSS3, 可以參考這兒asp”>http://www.w3schools.com/css/default.asp.

希望對您WEB開發有幫助.

 

 摘自 PetterLiu
 

發佈留言