先看效果：
代碼如下：
<!DOCTYPE html>
<html>
<head>
<style>
.framehovertree {
position: relative;
height: 410px;
width: 410px;
margin: 100px;
border: 1px solid black;
border-radius:50%;
}
.centerhovertree {
height:200px;
width:4px;
position: absolute;
border: 0px solid black;
background-color: yellow;
transform: rotate(90deg);
transform-origin: 50% 100%;
border-radius:2px;
z-index:99999
}
.smallhovertree {
width: 10px;
height: 10px;
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 id="div1" class="framehovertree"><div class="smallhovertree"></div>
<div id="div2" class="centerhovertree"></div>
</div>
<script>
$(function () {
var centerDiv = $(".centerhovertree"), frameDiv = $(".framehovertree")
$(".centerhovertree").css({ "left": (frameDiv.width() - centerDiv.width()) / 2, "top": (frameDiv.height() / 2 - centerDiv.height()) })
var smallhovertree = $(".smallhovertree")
$(".smallhovertree").css({ "left": (frameDiv.width() - smallhovertree.width()) / 2, "top": (frameDiv.height() - smallhovertree.height()) / 2 })
})
var h_deg = 0;
function clock() {
document.querySelector(".centerhovertree").style.transform = "rotate(" + ((new Date().getSeconds()) * 6) + "deg)";
}
var int = self.setInterval("clock()", 50)
</script>
</body>
</html>