内圈和中间圈一起转动
我现在内圈跟中间的全一起转动,检查了好几遍,不知道问题在哪里???
#page2>.p2_circle{position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; background:url(images/p2_circle_outer.png) no-repeat center center; background-size:100%; width:59.375vw; height:59.375vw; border-radius:50%;
-webkit-animation:p2_circle_outer 1s linear 3s infinite;
animation:p2_circle_outer 1s linear 3s infinite;
}
@-webkit-keyframes p2_circle_outer{
0% {
-webkit-transform:rotate(0deg);
transform:rotate(0deg);
}
100%{
-webkit-transform:rotate(-360deg);
transform:rotate(-360deg);
}
}
@keyframes p2_circle_outer{
0% {
-webkit-transform:rotate(0deg);
transform:rotate(0deg);
}
100%{
-webkit-transform:rotate(-360deg);
transform:rotate(-360deg);
}
}
#page2>.p2_circle:before{ position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; content:""; background:url(images/p2_circle_middle.png) no-repeat center center; background-size:100%; width:45.625vw; height:45.625vw; border-radius:50%;
-webkit-animation:p2_circle_middle 1s linear 2s infinite;
animation:p2_circle_middle 1s linear 2s infinite;
}
@-webkit-keyframes p2_circle_middle{
0% {
-webkit-transform:rotate(0deg);
transform:rotate(0deg);
}
100%{
-webkit-transform:rotate(720deg);
transform:rotate(720deg);
}
}
@keyframes p2_circle_middle{
0% {
-webkit-transform:rotate(0deg);
transform:rotate(0deg);
}
100%{
-webkit-transform:rotate(720deg);
transform:rotate(720deg);
}
}
#page2>.p2_circle:after{ position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; background:url(images/p2_circle_inner.png) no-repeat center center; background-size:100%; width:39.9375vw; height:39.9375vw; border-radius:50%;
-wedkit-animation:p2_circle_inner 1s linear 1s infinite;
animation:p2_circle_inner 1s linear 1s infinite;
}
@-webkit-keyframes p2_circle_inner{
0% {
-wedkit-transform:rotate(0deg);
transform:rotate(0deg);
}
100%{
-wedkit-transform:rotate(-1080deg);
transform:rotate(-1080deg);
}
}
@keyframes p2_circle_inner{
0% {
-wedkit-transform:rotate(0deg);
transform:rotate(0deg);
}
100%{
-wedkit-transform:rotate(-1080deg);
transform:rotate(-1080deg);
}
}