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

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

};