第二頁頁面頁面沒有鋪滿問題
/* ?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;
}
第二頁這樣做的,但是一轉(zhuǎn)動就會出現(xiàn)這個問題如圖:
但是如果去掉外圈的轉(zhuǎn)動,就正常顯示,這是怎么回事
2016-03-31
刷新瀏覽器
2016-02-22
重裝瀏覽器看看