问答详情
源自:3-12 移动端项目开发——交互(page2_loading)

内圈和中间圈一起转动

我现在内圈跟中间的全一起转动,检查了好几遍,不知道问题在哪里???

#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); 

}

}

提问者:习惯就好了 2016-08-19 14:09

个回答

  • Eric_lee
    2016-08-22 16:50:36

    我看不懂呐,,