HTML代码：

<div id=”hold”></div>

CSS代码：

@-webkit-keyframes spin {  from {    -webkit-transform: rotate(360deg);    transform: rotate(360deg);  }  to {    -webkit-transform: rotate(0deg);    transform: rotate(0deg);  }}@keyframes spin {  from {    -webkit-transform: rotate(360deg);    transform: rotate(360deg);  }  to {    -webkit-transform: rotate(0deg);    transform: rotate(0deg);  }}@-webkit-keyframes osc {  0% {    -webkit-transform: scale(0.5);    transform: scale(0.5);    opacity: 0;  }  50% {    -webkit-transform: scale(1.5);    transform: scale(1.5);    opacity: 1;  }  100% {    -webkit-transform: scale(0.5);    transform: scale(0.5);    opacity: 0;  }}@keyframes osc {  0% {    -webkit-transform: scale(0.5);    transform: scale(0.5);    opacity: 0;  }  50% {    -webkit-transform: scale(1.5);    transform: scale(1.5);    opacity: 1;  }  100% {    -webkit-transform: scale(0.5);    transform: scale(0.5);    opacity: 0;  }}@-webkit-keyframes rainbow {  0% {    background: #df2020;  }  25% {    background: #80df20;  }  50% {    background: #20dfdf;  }  75% {    background: #7f20df;  }  100% {    background: #df2020;  }}@keyframes rainbow {  0% {    background: #df2020;  }  25% {    background: #80df20;  }  50% {    background: #20dfdf;  }  75% {    background: #7f20df;  }  100% {    background: #df2020;  }}

JS代码如下：

var num = 7,    ang = 360/num,    rad = num*5;function setup(){  for(var i=0; i<num; i++){    var button = document.createElement(‘div‘);    button.className = "dot"+i+" dot";    button.style.top = rad*Math.cos(ang*i*Math.PI/180)-10+"px";    button.style.left = rad*Math.sin(ang*i*Math.PI/180)-10+"px";    button.style.backgroundColor = "hsla("+ang*i+", 50%, 50%, 1)";    button.style.webkitAnimation =       "osc 2s ease-in-out infinite "+i/(num/2)+"s, rainbow 8s infinite "+i/(num/2)+"s";    button.style.animation =       "osc 2s ease-in-out infinite "+i/(num/2)+"s, rainbow 8s infinite "+i/(num/2)+"s, spin 1s infinite";    document.getElementById("hold").appendChild(button);  }}