搞了很久 有沒有大神幫忙看看？就是頁(yè)面2和 頁(yè)面3還有點(diǎn)小問題
CSS 代碼：
*{
? ?margin:0;
? ?padding: 0;
? ?border: none;
? ?font-size: 1.5625vw;
? ?font-family: "Microsoft Yahei";
}
html,body{height:100%;overflow: hidden;}
/* music*/
.music{ ?display: block; ?}
.music{position:fixed;top:3vh;right:4vw;z-index:5;width:15vw;height:15vw;border:4px solid #ef1639;border-radius:50%;background-color:#fff;}
.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;z-index: 0;margin:auto;width:79%;}
.music > img.play{-webkit-animation:music_disc 4s linear infinite;animation:music_disc 4s linear infinite;}
@keyframes music_disc{
? ?0%{
? ? ? ?-webkit-transform:rotate(0deg);
? ? ? ?transform:rotate(0deg);
? ?}
? ?100%{
? ? ? ?-webkit-transform:rotate(360deg);
? ? ? ?transform:rotate(360deg);
? ?}
}
@keyframes music_pointer{
? ?0%{
? ? ? ?-webkit-transform:rotate(0deg);
? ? ? ?transform:rotate(0deg);
? ?}
? ?100%{
? ? ? ?-webkit-transform:rotate(360deg);
? ? ? ?transform:rotate(360deg);
? ?}
}@-webkit-keyframes music_pointer{
? ? 0%{
? ? ? ? -webkit-transform:rotate(0deg);
? ? ? ? transform:rotate(0deg);
? ? }
? ? 100%{
? ? ? ? -webkit-transform:rotate(360deg);
? ? ? ? transform:rotate(360deg);
? ? }
}
@-webkit-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 >.bg{background: url("../img/p1_bg.jpg")no-repeat center center;background-size:100%;}
#page1 > .p1_lantern{width:45vw;height: 71.2vh;font-size:3.506rem;position:absolute;top:-3.4%;right:0;left:0;text-align:center;margin:auto;background:url("../img/p1_lantern.png")no-repeat center bottom;background-size:100%;padding-top:31vh;box-sizing: border-box; ?}
#page1 > .p1_lantern:before{
? ?position:absolute;
? ?top:0;
? ?right:0;
? ?left:0;
? ?bottom:0;
? ?margin:auto;
? ?content:"";
? ?width:30vw;
? ?height:30vw;
? ?background:#d60b3b;
? ?opacity:0.5;
? ?border-radius:50%;
? ?-webkit-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;
}
@keyframes p1_lantern{
? ?0%{
? ? ? ?opacity:0.5;
? ? ? ?-webkit-transform: scale(0.8,0.8);
? ? ? ?transform: scale(0.8,0.8);
? ?}
? ?100%{
? ? ? ?opacity:1;
? ?}
}
@-webkit-keyframes p1_lantern{
? ?0%{
? ? ? ?opacity:0.5;
? ? ? ?-webkit-transform: scale(0.8,0.8);
? ? ? ?transform: scale(0.8,0.8);
? ?}
? ?100%{
? ? ? ?opacity:1;
? ?}
}
#page1 > .p1_imooc{position:absolute;right:0;bottom:9vh;left:0;background:url("../img/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("../img/p2_bg.jpg") no-repeat center center;background-size:100%;}
#page2.fadeOut{
? ?opacity:0.3;
? ?-webkit-transform:translate(0,-100%);
? ?transform:translate(0,-100%);
}
#page2 > .p2_circle{
? ?position:absolute;
? ?top:0;
? ?right:0;
? ?bottom:0;
? ?left:0;
? ?margin:auto;
? ?z-index: 3;
? ?background:url("../img/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: 0vh;;
? ?right:0vh;
? ?bottom:0vh;
? ?left:0vh;
? ?margin:auto;
? ?content: "";
? ?background:url("../img/p2_circle_middle.png") no-repeat center center;
? ?background-size:100%;
? ?width:47.625vw;
? ?height:47.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;
? ?content: "";
? ?background:url("../img/p2_circle_inner.png") no-repeat center center;
? ?background-size:100%;
? ?width:39.937vw;
? ?height:39.937vw;
? ?-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("../img/p2_2016.png") no-repeat center center;
? ?background-size:100%;
? ?width:27.5vw;
? ?height:6.24vh;}
/*page3*/
#page3{
? ?display: none;
}
#page3 >.bg{background:url("../img/p3_bg.jpg") no-repeat center center;background-size:100%;}
#page3.fadeIn{
? ?-webkit-transform:translate(0, -100%);
? ?transform:translate(0,-100%);
}
#page3 > .p3_logo{
? ?width:34.6875vw;
? ?height:6.327vh;
? ?position:absolute;
? ?top:7.82vh;
? ?right:0;
? ?left:0;
? ?margin:auto;
? ?background:url("../img/p3_logo.png") no-repeat center center;
? ?background-size:100%;
}
#page3 > .p3_title{
? ?width:48.125vw;
? ?height:50vh;
? ?position:absolute;
? ?top:20.80vh;
? ?right:0;
? ?left:0;
? ?margin:auto;
? ?background:url("../img/p3_title.png") no-repeat center center;
? ?background-size:100%;
}
#page3 > .p3_second{
? ?width:22.8125vw;
? ?height:41.625vh;
? ?position:absolute;
? ?top:25.48vh;
? ?left:3.75vw;
? ?background:url("../img/p3_couplet_second.png") no-repeat center center;
? ?background-size:100%;
}#page3 > .p3_first{
? ? width:22.8125vw;
? ? height:41.625vh;
? ? position:absolute;
? ? top:25.48vh;
? ? right:3.75vw;
? ? background:url("../img/p3_couplet_first.png") no-repeat center center;
? ? background-size:100%;
}
#page3 > .p3_blessing{
? ?width:32vw;
? ?height:32vh;
? ?position:absolute;
? ?bottom:-2vh;
? ?right:0;
? ?left:0;
? ?margin:auto;
? ?border-radius:50%;
? ?background:url("../img/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 music=document.getElementById("music");
? ?var audio=document.getElementsByTagName("audio")[0];
? ?audio.addEventListener("ended",function(event){
? ? ? ?music.setAttribute("class","");
? ?},false);
? ?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";
? ? ? ?page3.style.display="block";
? ? ? ?page3.style.top="100%";
? ? ? ?setTimeout(function(){
? ? ? ? ? ?page2.setAttribute("class","page fadeOut");
? ? ? ? ? ?page3.setAttribute("class","page fadeIn");
? ? ? ?},5500);
? ?},false);
};
HTML代碼：
<!DOCTYPE html>
<html>
<head>
? ?<meta charset="utf-8">
? ?<meta http-equiv="X-UA-Compatible" content="chrome=1,IE=edge">
? ?<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
? ?<meta name="format-detecion" content="telephone=no">
? ?<title>賀春</title>
? ?<link rel="stylesheet" type="text/css" href="css/style.css">
? ?<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div class="music">
? ?<img ?src="img/music_pointer.png">
? ?<img class="play" id="music" src="img/music_disc.png">
</div>
<div id="page1">
? ?<div class="bg" style="display: block"></div>
? ?<div class="p1_lantern" >點(diǎn)擊屏幕<br>開啟好運(yùn)2017</div>
? ?<div class="p1_imooc"></div>
? ?<div class="p1_words">2017新春快樂</div>
</div>
<div class="page p2_bg_loading" id="page2">
? ?<div class="bg"></div>
? ?<div class="p2_circle"></div>
? ?<div class="p2_2016"></div>
</div>
<div 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="Sarah.mp3" type="audio/mpeg">
</audio>
</body>
</html>
