circle.scss

/*水平导航*/


$animation-count:2s;





*{padding: 0;border: none;margin: 0;}


#circle{width: 50px; height: 50px; margin:50px;position: relative; }

.circle-square{width: 100%; height: 100%;position: absolute;}
#circle>div:nth-child(1){}
#circle>div:nth-child(2){ -moz-transform:rotate(45deg);}
/*
黑色小原点 旋转

8s  0-7 (8/8)    16s  0-16(16/8)  4s  0-4000(4000/8)   */

.circle-square>div{width: 10px; height: 10px;background-color: black;border-radius: 100%;position: absolute;-moz-animation:mydot $animation-count infinite;}
.circle-square>div:nth-child(2){left: 40px;}
.circle-square>div:nth-child(3){left: 40px;top: 40px;}
.circle-square>div:nth-child(4){top: 40px;}

.circle-square-1>div:nth-child(1){-moz-animation-delay: 0s;}
.circle-square-2>div:nth-child(1){-moz-animation-delay: -1750ms;}
.circle-square-1>div:nth-child(2){-moz-animation-delay: -1500ms;}
.circle-square-2>div:nth-child(2){-moz-animation-delay: -1250ms;}
.circle-square-1>div:nth-child(3){-moz-animation-delay: -1000ms;}
.circle-square-2>div:nth-child(3){-moz-animation-delay: -750ms;}
.circle-square-1>div:nth-child(4){-moz-animation-delay: -500ms;}
.circle-square-2>div:nth-child(4){-moz-animation-delay: -250ms;}

@keyframes mydot
{
from {background: black;}
12% {background: rgb(63,63,63);}
25% {background: rgb(127,127,127);}
37% {background: rgb(191,191,191);}
50% {background: white;}
62% {background: rgb(191,191,191);}
75% {background: rgb(127,127,127);}
87% {background: rgb(63,63,63);}
to {background: black;}
}