使用jquery实现雷达扫描效果

我正试图找出一个可能的解决方案，如何使用jquery和css创建雷达扫描效果。本质上，一个半透明的三角形会围绕div的中点旋转。这是jquery可以做到的，还是我应该求助于其他方法？我不喜欢使用动画GIF。

HTML:

请注意，要支持某些浏览器，您需要添加供应商前缀，但这本身在IE10和Firefox中也适用。

$（函数（）{
变量$rad=$（“#rad”），
$obj=$（'.obj'），
度=0，
rad=$rad.width（）/2；
$obj.每个（函数（）{
var pos=$（this）.data（），
getAtan=数学atan2（位置x-rad，位置y-rad），
getDeg=（-getAtan/（数学PI/180）+180）| 0；
//读取/设置位置和存储度
$（this.css（{left:pos.x，top:pos.y}）.attr（'data-atDeg'，getDeg）；
});
（函数rotate（）{
$rad.css（{transform:'rotate（'+deg+'deg）}）；//雷达旋转
$（'[data atDeg='+deg+']'）.stop（）.fadeTo（0,1）.fadeTo（1700,0.2）；//在deg处设置点动画
deg=++deg%360；//在360处递增并重置为0
setTimeout（旋转，25）；//循环
})();
});
雷达{
位置：相对位置；
溢出：隐藏；
宽度：321px；高度：321px；
背景：#222 url(http://i.stack.imgur.com/vY6Tl.png);
边界半径：50%；
}
#拉德{
位置：绝对位置；
宽度：321px；
高度：321px；背景：url(http://i.stack.imgur.com/fbgUD.png);
}
B.obj{
背景：#cf5；
位置：绝对位置；
边界半径：50%；
宽度：4px；高度：4px；边距：-2px；
盒影：0 0 10px 5px rgba（100255,0,0.5）；
不透明度：0.2；
}

CSS3是一个选项吗？这在IE8中是做不到的，在其他浏览器的纯CSS中应该是相当容易的。。。可以结合使用jQuery/SVG动画技术。。。这可能会有帮助：是的，jQuery可以控制CSS3转换，如果你真的愿意的话。虽然看起来不太对。第一个和第二个“信标”元素之间的间隔异常大，尽管延迟是线性间隔的……奇怪。一定是我的Chrome版本，我不认为我已经更新了一段时间了，Chrome中没有旋转。稍后再次访问，这里有一个更新版本，使用渐变而不是额外的HTML元素，并且还显示了随机放置的点被扫掠器“ping”。

<div id="radar">
    <div class="beacon" id="beacon"></div>
    <div class="beacon" id="beacon-75"></div>
    <div class="beacon" id="beacon-50"></div>
    <div class="beacon" id="beacon-25"></div>
    <div class="circle" id="circle-big"></div>
    <div class="circle" id="circle-medium"></div>
    <div class="circle" id="circle-small"></div>
    <div class="circle" id="dot"></div>
    <div id="vertical"></div>
    <div id="horizontal"></div>
</div>