page2为什么变成这样？

个回答

爱米

2017-06-01 11:13:58

手机比例不对，可以尝试把背景的background-size: 100%;改成background-size: 100% 100%;，不过会变形，，

0
qq_艾有一颗橘子糖_03977570

2017-05-23 12:08:46

==============css==================
/*all tag*/
* { margin: 0; padding: 0; border: none; font-size: 1.5625vw; font-family: "Microsoft Yahei";}
html,
body{ height: 100%;}

/* music */
.music { position: fixed; top:3vh; right: 4vw; z-index: 5; width: 15vw; height: 15vw; border: 4px solid #ef1639; border-radius: 50%; background: #fff;}

.music > img:first-of-type { position: absolute; top:24%; right: 2.5%;z-index: 1; width: 28.421%;}
.music > img:last-of-type { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto;z-index: 0; width: 79%}
.music > img.play {
-webkit-animation: music_disc 4s linear infinite;
animation: music_disc 4s linear infinite;
}
@-webkit-keyframes music_disc {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg); }

100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg); }
}

@keyframes music_disc {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg); }
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg); }
}

/* page bg*/
.page { position: absolute; width: 100%; height: 100%;}
.page > .bg{ position: absolute; z-index: -1; width: 100%; height: 100%;}

/*page1*/
#page1 { display: block;}
#page1 > .bg { background: url("../images/p1_bg.jpg") no-repeat center center; background-size: 100%;}
#page1 > .p1_lantern { font-size:3.506rem; color: #fff; position: absolute; top:-3.4%; right: 0; left: 0; margin: auto; background: url("../images/p1_lantern.png") no-repeat center bottom; background-size: 100%; width: 45vw; height: 71.2vh; font-size: 3.506rem; padding-top:31vh; text-align: center; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box;}
#page1 > .p1_lantern:before { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; content: ""; margin: auto; width: 30vw; height: 30vw; background: #d60b3b; opacity: .5; border-radius: 50%; -webkit-box-shadow: 0 0 10vw 10vw #d60b3b; -mos-box-shadow: 0 0 10vw 10vw #d60b3b; -ms-box-shadow: 0 0 10vw 10vw #d60b3b; -o-box-shadow: 0 0 10vw 10vw #d60b3b; box-shadow: 0 0 10vw 10vw #d60b3b;
-webkit-animation: p1_lantern .5s infinite alternate;
animation: p1_lantern .5s infinite alternate;
}
@-webkit-keyframes p1_lantern {
0% { opacity: .5
-webkit-transform: scale(.8,.8);
transform: scale(.8,.8)
}
100% { opacity: 1; }
}
@keyframes p1_lantern {
0% { opacity: .5
-webkit-transform: scale(.8,.8);
transform: scale(.8,.8)
}
100% { opacity: 1; }
}
#page1 > .p1_imooc { position: absolute; right: 0; bottom: 9vh; left: 0; background: url("../images/p1_imooc.png") no-repeat center center; background-size: 100%; width: 27.656vw; height: 18.63vh; margin: auto;}
#page1 > .p1_words { font-size: 2.134rem; position: absolute; right: 0; bottom: 48px; left: 0; text-align: center; color: #231815;}

/*page2*/
#page2 { display: none;}
#page2 > .bg { background: url("../images/p2_bg.jpg") no-repeat center center; background-size: 100%;}
#page2 > .p2_circle { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; border-radius: 50%; background: url("../images/p2_circle_outer.png") no-repeat center center; background-size: 100%; width: 59.375vw; height: 59.375vw;
-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; border-radius: 50%; content: ""; background: url("../images/p2_circle_middle.png") no-repeat center center; background-size: 100%; width: 45.625vw; height: 45.625vw;
-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; border-radius: 50%; content: ""; background: url("../images/p2_circle_inner.png") no-repeat center center; background-size: 100%; width: 39.9375vw; height: 39.9375vw;
-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; right: 0; bottom: 0; left: 0; margin: auto; background: url("../images/p2_2016.png") no-repeat center center; background-size: 100%; width: 27.5vw; height: 6.24vh;}

/*page3*/
#page3 { display: none;}
#page3 > .bg { background: url("../images/p3_bg.jpg") no-repeat center center; background-size: 100%;}
#page3 > .p3_logo { width: 34.6875vw; height: 6.327vh; position: absolute; top: 7.82vh; right: 0; left: 0; margin: auto; background: url("../images/p3_logo.png") no-repeat center center; background-size: 100%;}
#page3 > .p3_title { width: 48.125vw; height: 50vh; position: absolute; top: 21vh; right: 0; left: 0; margin: auto; background: url("../images/p3_title.png") no-repeat center center; background-size: 100%;}
#page3 > .p3_second { width: 22.8125vw; height: 41.652vh; position: absolute; top: 25.48vh; left: 3.75vw; background: url("../images/p3_couplet_second.png") no-repeat center center; background-size: 100%;}
#page3 > .p3_first { width: 22.8125vw; height: 41.652vh; position: absolute; top: 25.48vh; right: 3.75vw; background: url("../images/p3_couplet_first.png") no-repeat center center; background-size: 100%;}
#page3 > .p3_blessing { width: 32vw; height: 32vw; position: absolute; right: 0; bottom: 10vh; left: 0; margin: auto; border-radius: 50%; background: url("../images/p3_blessing.png") no-repeat center center; background-size: 100%;
-webkit-animation: p3_blessing 2s linear infinite;
animation: p3_blessing 2s linear infinite;
}
@-webkit-keyframes p3_blessing {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes p3_blessing {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}

==============js============
window.onload = function(){
var page1 = document.getElementById("page1");
var page2 = document.getElementById("page2");
var page3 = document.getElementById("page3");

var music = document.getElementById("music");
var audio = document.getElementsByTagName("audio")[0];

//当音乐播放完停止时候，自动停止光盘旋转效果
audio.addEventListener("ended",function(event){
music.setAttribute("class","");
//music.style.animationPlayState = "paused";
//this.style.webkitAnimationPlayState = "running";
},false);

//点击音乐图标，控制音乐播放效果
// music.onclick = function(){
// if (audio.paused) {
// audio.play();
// this.setAttribute("class","play");
// //this.style.animationPlayState = "running";
// //this.style.webkitAnimationPlayState = "running";
// } else {
// audio.pause();
// this.setAttribute("class","");
// //this.style.animationPlayState = "paused";
// //this.style.webkitAnimationPlayState = "paused";
// };
// };
music.addEventListener("touchstart",function(event){
if (audio.paused) {
audio.play();
this.setAttribute("class","play");
} else {
audio.pause();
this.setAttribute("class","");
};
},false);

page1.addEventListener("touchstart",function(event){
page1.style.display = "none";
page2.style.display = "block";
},false);
};

0