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

        我们要实现像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 100%);
     position:absolute;

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

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开发有帮助.

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