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

我们要实现像Google+ 那样圆圈效果, 不使用图片.这里只使用CSS3与JQuery, 先定义CSS:

   1:  <style type="text/css">

   2:  div.circle {

   3:      margin: 100px auto;

   4:      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:      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:      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:  div.middle.hover {

  54:      -moz-transform: scale(1.4);

  55:      -webkit-transform: scale(1.4);

  56:      transform: scale(1.4);

  57:  }

  58:  div.inner

  59:  {

  60:      margin:14px;

61:

  62:      background:#3f96d1;

  63:      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:      $('div.circle').mouseover(function() {

   7:          $('div.outer').addClass('hover');

   8:          $('div.middle').addClass('hover');

   9:      });

  10:      $('div.circle').mouseout(function() {

  11:          $('div.outer').removeClass('hover');

  12:          $('div.middle').removeClass('hover');

  13:      });

  14:  });

  15:  </script>

目标的HTML片段:

<div class="circle"><div class="outer"></div><div class="middle"></div><div class="inner">Developers code</div></div>

好了,运动后效果图是这样的:

您可能先了解CSS3, 可以参考这儿.

希望对您WEB开发有帮助.

作者：Petter Liu
出处：http://www.cnblogs.com/wintersun/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
该文章也同时发布在我的独立博客中-Petter Liu Blog。