课程

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

page2为什么变成这样？

来源：4-2 5 课程总结

qq_艾有一颗橘子糖_03977570

2017-05-23 12:07

http://img.mukewang.com/5923b5370001784604870563.jpg

page2为什么变成这样？

写回答 关注

2回答

  • 爱米
    2017-06-01 11:13:58

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

    0 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 0

HTML5+CSS3实现春节贺卡

又逢新春佳节，春节贺卡搞起来，学会HTML5+CSS3实现春节贺卡

110057 学习 · 450 问题

查看课程

相似问题

transition属性为什么放在page2里面

回答 2

page2显示错乱

回答 1

做完后page3样式跑到page2上面了

回答 2

page2 三个圈不居中

回答 1

page2的内圈不转

回答 1

打开慕课网App查看更多内容