前端学习(391):新春贺卡制作13视口控制

别等时光非礼了梦想. 提交于 2020-01-12 20:25:07
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1,
    maximum-scale=1,user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <title>新春贺卡</title>
    <link rel="stylesheet" type="text/css" href="./mooccss/style.css">
  
</head>
<body>
    <div class="music">
        <img src="./moocimg/music_pointer.png" alt="">
        <img class="play" id="music" src="./moocimg/music_disc.png" alt="">
    </div>
    <div class="page" id="page1">
        <div class="bg"></div>
        <div class="p1_lantern">点击屏幕<br>开启好运2020</div>
        <div class="p1_imooc"></div>
        <div class="p1_words">2020年歌谣新年特写</div>
    </div>
    <div class="page" id="page2">
        <div class="p2_bg_loading"></div>
        <div class="bg"></div>
        <div class="p2_circle"></div>
        <div class="p2_2016"></div>
    </div>
    <div class="page" id="page3">
        <div class="bg"></div>
        <div class="p3_logo"></div>
        <div class="p3_title"></div>
        <div class="p3_second"></div>
        <div class="p3_first"></div>
        <div class="p3_blessing"></div>
    </div>
    <audio autoplay="true">
        <source src="./moocmusic/test.mp3" type="audio/mpeg">
    </audio>
      <script>
     window.onclick = 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","");
    },false);
     
    //  music.onclick = function(){
    //       if(audio.paused){
    //         audio.play();
    //           this.setAttribute("class","play");
    //          // this.style.animationPlayState="running";
    //          // music.setAttribute("class","play");         
    //       }else{
    //          audio.pause();
    //       this.setAttribute("class","");
    //           // music.setAttribute("class","");              this.style.animationPlayState="paused";
    //      };
    // };
    music.addEventListener("touchstart",function(event){
        if(audio.paused){
            audio.play();
              this.setAttribute("class","play");
             // this.style.animationPlayState="running";
            // music.setAttribute("class","play");         
          }else{
             audio.pause();
          this.setAttribute("class","");
              // music.setAttribute("class","");              this.style.animationPlayState="paused";
          };
    },false);
    
 
//  页面翻页
page1.addEventListener("touchstart",function(event){
    page1.style.display="none";
    page2.style.display="block";
    page3.style.display="block";
    page3.style.top="100%";
    setTimeout(function(){
        page2.setAttribute("class","page fadeOut");
        page3.setAttribute("class","page fadeIn");
    },5500);
},false);

};
    </script> 
    
</body>

</html>

style.css

*{margin: 0;padding: 0;border: none;font-size: 1.5625vw;font-family: "Microsoft Yahei";}
html,body{height: 100%;overflow: hidden;}
.music{position: fixed;top:3vh;right: 4vh; width: 15vw;height: 15vw;border: 4px solid #ef1639;z-index: 5;background: #fff;border-radius: 50%;}

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



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

#page1{display: block;}
#page1 > .bg{background:url("../moocimg/p1_bg.jpg") no-repeat center center;
background-size: 100%;}
#page1 > .p1_lantern{position: absolute;top: -3.4%;right: 0;left: 0;margin: auto; width: 45vw;height: 71.2vh;background: url("../moocimg/p1_lantern.png") no-repeat center bottom;
font-size: 3.506rem;background-size: 100%;padding-top: 31vh;color: #fff;
box-sizing: border-box;text-align: center;animation: p1_lantern .5s infinite alternate;}
@keyframes p1_lantern{
    0%{opacity: .5;
        transform: scale(.8,.8);
    }
    100%{opacity: 1;}
}

#page1 >.p1_lantern::before{position: absolute;top: 0;right: 0;bottom: 0;left: 0;margin: auto;width: 30vw;height: 30vw;background: #d60b5b;opacity: .5;box-shadow: 0 0 10vw 10vw  #d60b5b;z-index: -1;content: "";border-radius: 50%;}

#page1 > .p1_imooc{position: absolute;right: 0;bottom: 9vh;left: 0;background: url("../moocimg/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;left: 0;right: 0;bottom: 48px;text-align: center;color: #231815;}

#page2{display: none;transition: .5s;}
#page2 .p2_bg_loading{z-index: 4;background: #ef1639;
animation: p2_bg_loading 1s linear forwards;}
@keyframes p2_bg_loading{
    0%{opacity: 1;}
    100%{opacity: 0;}
}
#page2.fadeOut{opacity: .3;
transform: translate(0.-100%);}
#page2 > .bg{background:url("../moocimg/p2_bg.jpg") no-repeat center center;
    background-size: 100%;}
 #page2 >.p2_circle::before{position: absolute;top: 0;right: 0;left: 0;bottom: 0;margin: auto;content: ""; background:url("../moocimg/p2_circle_middle.png") no-repeat center center;background-size: 100%;width: 45.625vw;height: 45.625vw;border-radius: 50%;
    animation: p2_circle_middle 1s linear 2s infinite;}
#page2 >.p2_circle::after{position: absolute;top: 0;right: 0;left: 0;bottom: 0;margin: auto;content: ""; background:url("../moocimg/p2_circle_inner.png") no-repeat center center;
background-size: 100%;width: 39.937vw;height: 39.937vw;border-radius: 50%;
animation: p2_circle_inner 1s linear 1s infinite;
}
@keyframes p2_circle_inner{
    0%{
        transform:rotate(0deg);
    }
    100%{
        transform:rotate(-1080deg);
    }
}
@keyframes p2_circle_middle{
    0%{
        transform:rotate(0deg);
    }
    100%{
        transform:rotate(-720deg);
    }
}
#page2 >.p2_circle{position: absolute;top: 0;right: 0;left: 0;bottom: 0;margin: auto;background:url("../moocimg/p2_circle_outer.png") no-repeat center center;background-size: 100%;width: 59.375vw;height: 59.375vw;border-radius: 50%;animation: p2_circle_outer 1s linear 3s infinite;}
@keyframes p2_circle_outer{
    0%{
        transform:rotate(0deg);
    }
    100%{
        transform:rotate(-360deg);
    }
}
#page2 >.p2_2016{position: absolute;top: 0;right: 0;left: 0;bottom: 0;margin: auto;background:url("../moocimg/p2_2016.png") no-repeat center center;background-size: 100%;width: 27.5vw;height: 6.24vh;}

#page3{display: none;transition: .5s;}
#page3.fadeIn{transform: translate(0,-100%);}
#page3 > .bg{background:url("../moocimg/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;background: url("../moocimg/p3_logo.png") no-repeat center center;background-size: 100%;margin: auto;}
#page3>.p3_title{width: 48.125vw;height: 50vh;position: absolute;top: 21vh;right: 0;
    left: 0;background: url("../moocimg/p3_title.png") no-repeat center center;background-size: 100%;margin: auto;}
#page3>.p3_second{width: 22.8125vw;height: 41.625vh;position: absolute;top: 25.48vh;left: 3.75vw;background: url("../moocimg/p3_couplet_second.png") no-repeat center center;background-size: 100%;margin: auto;}
#page3>.p3_first{width: 22.8125vw;height: 41.625vh;position: absolute;top: 25.48vh;right: 3.75vw;background: url("../moocimg/p3_couplet_first.png") no-repeat center center;background-size: 100%;margin: auto;}
#page3>.p3_blessing{width: 32vw;height: 32vw;position: absolute;bottom: 10vh; right: 0;
left: 0;background: url("../moocimg/p3_blessing.png") no-repeat center center;background-size: 100%;border-radius: 50%;margin: auto;
animation: p3_blessing 2s linear infinite;}
@keyframes p3_blessing{
    0%{
        transform:rotate(0deg);
    }
    100%{
        transform:rotate(360deg);
    }
}

/* 特效 */

    

运行结果

链接:https://pan.baidu.com/s/1aemYUH949hRuwDyzsxeeLg
提取码:i7ga
 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!