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

<style type="text/css">
div.circle {
margin: 100px auto;
width:200px;
height:200px;
 }
div.outer.hover {
 -moz-transform: scale(1.45);
 -webkit-transform: scale(1.45);
 transform: scale(1.45);
}

div.outer{
position:absolute;
 z-index:800;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
 transition: all .2s ease-in-out;
 background:transparent;
width:122px;
 height:122px;
-webkit-border-radius: 61px;
-moz-border-radius: 61px;
border-radius: 61px;
border:1px solid #aaaaaa;
}
div.middle
{
margin:1px;
width:122px;
height:122px;
-webkit-border-radius: 61px;
-moz-border-radius: 61px;
border-radius: 61px;
background: #ececec;
z-index:900;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ececec', endColorstr='#d8d8d8',GradientType=0 );
background: linear-gradient(top, #ececec 0%,#d8d8d8 );
position:absolute;

transition: all .2s ease-in-out;
background: -moz-linear-gradient(top, #ececec 0%, #d8d8d8 );
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ececec), color-stop(,#d8d8d8));
background: -webkit-linear-gradient(top, #ececec 0%,#d8d8d8 );
background: -o-linear-gradient(top, #ececec 0%,#d8d8d8 );
background: -ms-linear-gradient(top, #ececec 0%,#d8d8d8 );
}

div.middle.hover {
-moz-transform: scale(1.4);
-webkit-transform: scale(1.4);
transform: scale(1.4);
}
div.inner
{
margin:14px;

background:#3f96d1;
width:96px;
height:96px;

font-size:11px;
color:#FFF;
line-height:96px;
text-align:center;
font-family:Arial;

-webkit-border-radius: 48px;
-moz-border-radius: 48px;
border-radius: 48px;

-webkit-box-shadow: inset 0px 1px 1px 0px #575757;
-moz-box-shadow: inset 0px 1px 1px 0px #575757;
box-shadow: inset 0px 1px 1px 0px #575757;

border-bottom:1px solid #FFF;

position:absolute;
z-index:1000;
 }
</style>

引入JQuery:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript">
</script>

<script language="javascript" type="text/javascript">
$(function() {
$('div.circle').mouseover(function() {
$('div.outer').addClass('hover');
$('div.middle').addClass('hover');
});
$('div.circle').mouseout(function() {
$('div.outer').removeClass('hover');
$('div.middle').removeClass('hover');
});
});
</script>

目标的HTML片段:

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

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

您可能先了解CSS3,

希望对您WEB开发有帮助.

转自：http://www.cnblogs.com/wintersun/