第二页页面页面没有铺满问题
/* page2 */
#page2{display:block;}
#page2 > .bg{
background:url(../images/p2_bg.jpg) no-repeat center center;
background-size:100%;
}
#page2 > .p2_circle{
position:absolute;
top:0;
right:0;
left:0;
bottom:0;
margin:auto;
width:59.375vw;
height:59.375vw;
background:url(../images/p2_circle_outer.png) no-repeat center center;
background-size:100%;
border-radius:50%;
/*-webkit-animation:p2_circle_outer 1s linear 3s infinite;
animation:p2_circle_outer 1s linear 3s infinite;*/
-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;
bottom:0;
right: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;
bottom:0;
right:0;
left:0;
margin:auto;
content:"";
background:url(../images/p2_circle_inner.png) no-repeat center center;
background-size:100%;
width:39.9375vw;
height:39.9375vw;
border-radius:50%;
-webkit-animation:p2_circle_inner 1s linear 1s infinite;
animation:p2_circle_inner 1s linear 1s infinite;
}
@-webkit-keyframes p2_circle_inner{
0%{
-webkit-transform:rotate(0deg);
transform:rotate(0deg);
}
100%{
-webkit-transform:rotate(-1080deg);
transform:rotate(-1080deg);
}
}
@keyframes p2_circle_inner{
0%{
-webkit-transform:rotate(0deg);
transform:rotate(0deg);
}
100%{
-webkit-transform:rotate(-1080deg);
transform:rotate(-1080deg);
}
}
#page2 > .p2_2016{
position:absolute;
top:0;
bottom:0;
right:0;
left:0;
margin:auto;
background: url(../images/p2_2016.png) no-repeat center center;
background-size:100%;
width:27.5vw;
height:6.24vh;
}
第二页这样做的，但是一转动就会出现这个问题如图：
但是如果去掉外圈的转动，就正常显示，这是怎么回事
