可以分享源代码吗
有源代码吗？可以分享下吗
慕粉1800128420
2017-12-11
4 回答
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","");
},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","")
// }
// };
music.addEventListener("touchstart",function(event){
if (audio.paused) {
audio.play();
this.setAttribute("class","play")
//this.style.animationPlayState="running";
//this.style.webkitanimationPlayState="running";
} 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);
};/*通用*/
*{margin:0;padding:0;border:none;font-size:1.5625vw;font-family:"microsoft yahei";-webkit-tap-highlight-color:transparent;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;-o-box-sizing:border-box}
body,html{height:100%;overflow: hidden;}
/*音乐*/
.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;z-index:1;top:24%;right:2.5%;width:28.421%}
.music>img:last-of-type{position:absolute;z-index:0;top:0;right:0;bottom:0;left:0;margin:auto;width:79%}
/*碟片转动*/
.music>img.play{
animation: music_disc 4s linear infinite;
-webkit-animation: music_disc 4s linear infinite;
}
@keyframes music_disc{
0%{
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
}
@-webkit-keyframes music_disc{
0%{
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
}
#page1{display:block;transition: .5s;-webkit-transition: .5s;}
#page2{display:none;transition: .5s;-webkit-transition: .5s;}
#page3{display:none;transition: .5s;-webkit-transition: .5s;}
/*page bg*/
.page{position:absolute;width:100%;height:100%}
.page>.bg{width:100%;z-index:-1;position:absolute;height:100%}
/*page1*/
#page1>.bg{background:url(../img/p1_bg.jpg) no-repeat center center;background-size:100%}
#page1>.p1_lantern{position:absolute; color:#FFFFFF;top:-3.4%;right:0;left:0;margin:auto;background:url(../img/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}
#page1>.p1_lantern:before{position:absolute;top:0;right:0;left:0;bottom:0;z-index:-1;content:" ";margin:auto;width:30vw;height:30vw;background:#d60b3b;opacity:.5;border-radius:50%;box-shadow:0 0 10vw 10vw #d60b3b;-webkit-box-shadow:0 0 10vw 10vw #d60b3b;-moz-box-shadow:0 0 10vw 10vw #d60b3b;-ms-box-shadow:0 0 10vw 10vw #d60b3b;-o-box-shadow:0 0 10vw 10vw #d60b3b;
animation: p1_lantern .5s infinite alternate;
-webkit-animation: p1_lantern .5s infinite alternate;
}
@keyframes p1_lantern{
0%{
opacity: 0.5;
transform: scale(.8,.8);
-webkit-transform: scale(.8,.8);
}
100%{
opacity: 1;
}
}
@-webkit-keyframes p1_lantern{
0%{
opacity: 0.5;
transform: scale(.8,.8);
-webkit-transform: scale(.8,.8);
}
100%{
opacity: 1;
}
}
#page1>.p1_imooc{position:absolute;right:0;left:0;bottom:9vh;margin:auto;background:url(../img/p1_imooc.png) no-repeat center center;background-size:100%;width:27.656vw;height:18.63vh}
#page1>.p1_words{font-size:2.134rem;position:absolute;right:0;bottom:48px;left:0;text-align:center;color:#231815}
/*page1*/
#page2.fadeOut{
opacity: .3;
transform: translate(0,-100%);
-webkit-transform: translate(0,-100%);
}
#page2>.p2_bg_loading{
z-index: 4;background-color: #ef1639;
animation: p2_bg_loading 1s linear forwards;
-webkit-animation: p2_bg_loading 1s linear forwards;
}
@keyframes p2_bg_loading{
0%{opacity: 1;}
100%{opacity: 0;}
}
@-webkit-keyframes p2_bg_loading{
0%{opacity: 1;}
100{opacity: 0;}
}
#page2>.bg{background:url(../img/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(../img/p2_circle_outer.png) no-repeat center center;background-size:100%;width:59.375vw;height:59.375vw;
animation: p2_circle_outer 1s linear 3s infinite;
-webkit-animation: p2_circle_outer 1s linear 3s infinite;
}
@keyframes p2_circle_outer{
0%{
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
100%{
transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
}
}
@-webkit-keyframes p2_circle_outer{
0%{
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
100%{
transform: rotate(-360deg);
-webkit-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(../img/p2_circle_middle.png) no-repeat center center;background-size:100%;width:45.625vw;height:45.625vw;
animation: p2_circle_middle 1s linear 2s infinite;
-webkit-animation: p2_circle_middle 1s linear 2s infinite;
}
@keyframes p2_circle_middle{
0%{
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
100%{
transform: rotate(-720deg);
-webkit-transform: rotate(-720deg);
}
}
@-webkit-keyframes p2_circle_middle{
0%{
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
100%{
transform: rotate(-720deg);
-webkit-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(../img/p2_circle_inner.png) no-repeat center center;background-size:100%;width:39.9375vw;height:39.9375vw;
animation: p2_circle_inner 1s linear 1s infinite;
-webkit-animation: p2_circle_inner 1s linear 1s infinite;
}
@keyframes p2_circle_inner{
0%{
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
100%{
transform: rotate(-1080deg);
-webkit-transform: rotate(-1080deg);
}
}
@-webkit-keyframes p2_circle_inner{
0%{
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
100%{
transform: rotate(-1080deg);
-webkit-transform: rotate(-1080deg);
}
}
#page2>.p2_2018{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.fadeIn{
transform: translate(0,-100%);
-webkit-transform: translate(0,-100%);
}
#page3>.bg{background:url(../img/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(../img/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(../img/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(../img/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(../img/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(../img/p3_blessing.png) no-repeat center center;background-size:100%;
animation: p3_blessing 2s linear infinite;
-webkit-animation: p3_blessing 2s linear infinite;
}
@keyframes p3_blessing{
0%{
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
}
@-webkit-keyframes p3_blessing{
0%{
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
}
举报
0/150
提交
取消
