HTML代码:
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
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);
}
}
原文:http://www.cnblogs.com/lw941/p/3915182.html