css+js实现 发光圆形

圆的分布方法来自http://www.cnblogs.com/lufy/archive/2012/06/21/2558049.html感兴趣可以研究研究，带你重温高中数学。。。

<div class="center">           
      <div class='c1' id='c1'>
           <div class="light" id='lightCont'></div>
      </div>         
 </div>

.center{
    position: relative;
    padding-bottom: 89.6%;//容器的高/宽
}
.center .c1{
        position: absolute;
    left:;
    right:;
    top:;
    bottom:}
.center .c1 .light{
    left: 0px;
    right: 0px;
    position: absolute;
    top: 0px;
    bottom: 9px
}
.center .c1 .light em{
    position: absolute;
    width: 4%;
    height: 4%;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0 0 10px 2px #fff

}
.center .c1 .light em:nth-of-type(odd){
background-color: #ffd200;
box-shadow: 0 0 10px 2px #ffd200;
animation:twinkling .3s infinite  ease-in-out alternate;
}

.center .c1 .light em:nth-of-type(even){
background-color: #fff;
animation:twinklingf .3s infinite  ease-in-out alternate;
}


@-webkit-keyframes twinkling{  
    0%{  
        background-color: #fff; 
        box-shadow: 0 0 10px 2px #fff;
    }  
    100%{  
        background-color: #ffd200;
        box-shadow: 0 0 10px 2px #ffd200;
    }  
}  

@-webkit-keyframes twinklingf{ 
    0%{  
        background-color: #ffd200;
        box-shadow: 0 0 10px 2px #ffd200;
    }  
    100%{  
        background-color: #fff;
        box-shadow: 0 0 10px 2px #fff;
    }  
}

var lightCont=document.getElementById('lightCont'),
      boxW=document.getElementById('c1').weight/100,
      html='',
      num=24;//圆点个数 
//中心点横坐标
 var dotLeft = 156;
 //中心点纵坐标
var dotTop = 157;
//半径
 var radius = 147;
//每一个BOX对应的角度;
 var avd = 360/num;
 //每一个BOX对应的弧度;
var ahd = avd*Math.PI/180; 
 //设置圆的中心点的位置
 for(var i=0;i<=23;i++){
                var style="top:"+ ((Math.cos((ahd*i))*radius+dotTop))/boxW+"%;left:"+((Math.sin((ahd*i))*radius+dotLeft))/boxW+"%"
                html+='<em style='+style+'></em>'
                lightCont.innerHTML=html
}