查看效果：http://hovertree.com/texiao/jquery/24/
css3畫圓的方法：http://hovertree.com/h/bjae/css3circle.htm
使用jQuery畫同心圓,原理是調整內部圓的圓點,當然也可以不使用jQuery，直接用CSS也是可以實現的，會在底部實現。
jQuery實現代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>jQuery畫同心圓 - 何問起</title><meta name="viewport" content="width=device-width, initial-scale=1" />
<meta charset="utf-8" />
<style>
.framehovertree {
position: relative;
margin: 100px auto;
width: 300px;
height: 300px;
border-radius: 150px;
border: 1px solid green;
background-color:greenyellow
}
.centerhovertree {
width: 150px;
height: 150px;
background-color: hotpink;
position: absolute;
border-radius: 50%;
z-index: 999;
}
</style>
<script src="http://hovertree.com/ziyuan/jquery/jquery-1.11.3.min.js"></script>
</head>
<body>
<div style="width:100%;text-align:center">
<h2>jQuery畫同心圓</h2>
<a href="http://hovertree.com/">首頁</a> <a href="http://hovertree.com/texiao/">特效</a> <a href="http://hovertree.com/h/bjaf/tongxinyuan.htm">原文</a> <a href="http://hovertree.com/menu/jquery/">jQuery</a>
</div>
<div class="framehovertree">
<div class="centerhovertree"></div>
</div>
<script>
$(function () {
var centerDiv = $(".centerhovertree"), frameDiv = $(".framehovertree")
$(".centerhovertree").css({ "left": (frameDiv.width() - centerDiv.width()) / 2, "top": (frameDiv.height() - centerDiv.height()) / 2 })
})
</script>
</body>
</html>
純CSS3實現同心圓：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>純CSS3實現同心圓 - 何問起</title>
<meta charset="utf-8" />
<style>
.framehovertree {
position: relative;
margin: 100px auto;
width: 300px;
height: 300px;
border-radius: 150px;
border: 1px solid green;
background-color:green;
}
.centerhovertree {
width: 150px;
height: 150px;
background-color:red;
position: absolute;
border-radius: 50%;
z-index: 999;
margin:auto;
left:0px ;right:0px;
top:0px;bottom:0px;
text-align:center;line-height:150px;
color:white;
}
</style>
</head>
<body>
<div class="framehovertree">
<div class="centerhovertree">何問起 同心圓</div>
</div>
</body>
</html>
效果如下：
何問起 同心圓