求项目源码
没有项目源码啊？只有切图图片下载
qq_七木_03926355
2016-11-24
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 shouba = document.getElementById('shouba');
var audio = document.getElementsByTagName('audio')[0];
//音乐播放停止，自动停止光盘旋转(添加监听事件)
audio.addEventListener("enden",function(event){
music.setAttribute("class","");
shouba.setAttribute("class","shouba");
},false)
//点击音乐图标，控制音乐播放(PC端点击事件)
// 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",""); //js方法
// // this.style.animationPlayState = "paused"; //css方法
// // this.style.webkitanimationPlayState = "paused"; //兼容ios
// }
// }
//点击音乐图标，控制音乐播放(手机端触摸事件)
music.addEventListener("touchstart",function(event){
if(audio.paused){
audio.play();
this.setAttribute("class","play");
shouba.setAttribute("class","");
// this.style.animationPlayState = "running";
// this.style.webkitanimationPlayState = "running";
}else{
audio.pause();
this.setAttribute("class","");
shouba.setAttribute("class","shouba"); //js方法
// this.style.animationPlayState = "paused"; //css方法
// this.style.webkitanimationPlayState = "paused"; //兼容ios
}
},false)
//点击屏幕，开启2016好运(手机端触摸事件)
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:0;
font-size:1.5625vw;
font-family:"Microsoft Yahei";
}
html,body{
height:100%;
overflow:hidden;
}
.music{
position:fixed;
top:3vh;
right:4vw;
z-index:5;
width:15vw;
height:15vw;
border:0.5em solid #ef1639;
border-radius:50%;
background-color:#fff;
}
.music > img:nth-child(1){
position:absolute;
top:24%;
right:2.5%;
width:28.421%;
z-index:2;
}
.shouba{
-webkit-transform-origin:100% 0%;
transform-origin:100% 0%;
-webkit-transform:rotate(-15deg);
transform:rotate(-15deg);
-webkit-animation:0.5s;
animation:0.5s;
}
.music > img:nth-child(2){
position:absolute;
top:11%;
right:0;
bottom:0;
left:11%;
margin:0;
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);
}
}
@-webkit-keyframes music_disc{
0%{
-webkit-transform:rotate(0deg);
transform:rotate(0deg);
}
100%{
-webkit-transform:rotate(360deg);
transform:rotate(360deg);
}
}
.page{
position:absolute;
width:100%;
height:100%;
}
.page > .bg{
position:absolute;
width:100%;
height:100%;
z-index:-1;
}
#page1 >.bg{
background:url("../../test/images/p1_bg.jpg") no-repeat center center;
background-size:100%;
}
#page1 > .p1_lantern{
width:45vw;
height: 75.2vh;
font-size:3em;
position:absolute;
top:-3.4%;
right:0;
left:0;
color:green;
text-align:center;
font-weight:bold;
margin:auto;
background:url("../../test/images/p1_lantern.png")no-repeat center center;
background-size:100%;
padding-top:31vh;
-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;
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("../../test/images/p1_imooc.png") no-repeat center center;
background-size:100%;
width:27.656vw;
height:18.63vh;
margin:1em auto ;
}
#page1 > .p1_words{
font-size:2.5em;
position:absolute;
right:0;
bottom:2em;
left:0;
text-align:center;
color:#231815;
}
#page2{
display:none;
-webkit-transition:0.5s;
transition:0.5s;
}
#page2.fadeOut{
opacity:0.3;
-webkit-transform:translate(0,-100%);
transform:translate(0,-100%);
}
.p2_bg_loading{
/*z-index:4;*/
background:#ef1639;
-webkit-animation:p2_bg_loading 1s linear forwards;
animation:p2_bg_loading 1s linear forwards;
}
@-webkit-keyframes p2_bg_loading{
0%{opacity:0;}
100%{opacity:1;}
}
@keyframes{
0%{opacity:0;}
100%{opacity:1;}
}
#page2 >.bg{
background:url("../../test/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;
z-index: 3;
background:url("../../test/images/p2_circle_outer.png") no-repeat center center;
background-size:100%;
width:59.375vw;
height: 59.375vw;
-webkit-animation:p2_circle 1s linear 3s infinite;
animation:p2_circle 1s linear 3s infinite;
}
@-weikit-keyframes p2_circle{
0%{
-webkit-transform:rotate(0deg);
transform:rotate(0deg);
}
100%{
-webkit-transform:rotate(-360deg);
transform:rotate(-360deg);
}
}
@keyframes p2_circle{
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;
content: "";
background:url("../../test/images/p2_circle_middle.png") no-repeat center center;
background-size:100%;
width:45.625vw;
height:45.625vw;
-webkit-animation:p2_circle1 1s linear 2s infinite;
animation:p2_circle1 1s linear 2s infinite;
}
@-weikit-keyframes p2_circle1{
0%{
-webkit-transform:rotate(0deg);
transform:rotate(0deg);
}
100%{
-webkit-transform:rotate(720deg);
transform:rotate(720deg);
}
}
@keyframes p2_circle1{
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("../../test/images/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;
}
@-weikit-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("../../test/images/p2_2016.png") no-repeat center center;
background-size:100%;
width:27.5vw;
height:6.24vh;
}
#page3{
display:none;
-webkit-transition: 0.5s;
transition: 0.5s;
}
#page3.fadeIn{
-webkit-transform:translate(0, -100%);
transform:translate(0,-100%);
}
#page3 >.bg{
background:url("../../test/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("../../test/images/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("../../test/images/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("../../test/images/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("../../test/images/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("../../test/images/p3_blessing.png") no-repeat center center;
background-size:100%;
-webkit-animation:p3_blessing 2s linear infinite;
animation:p3_blessing 2s linear infinite;
}
@-weikit-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);
}
}
<!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="../test/css/index.css" /> <script src="../test/js/audio.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div> <img id="shouba" src="../test/images/music_pointer.png"> <img id="music" src="../test/images/music_disc.png"> </div> <div id="page1"> <div></div> <div>点击屏幕<br>开启好运2016</div> <div></div> <div>2016新春快乐</div> </div> <div class="page p2_bg_loading" id="page2"> <div></div> <div></div> <div></div> </div> <div id="page3"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <audio autoplay="true"> <source src="Sarah.mp3" type="audio/mpeg"> </audio> </body> </html>
<!DOCTYPE html>
<!-- saved from url=(0038)http://www.imooc.com/activity/project1 -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<title>2016年慕课网新年特献</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="js/script.js" type="text/javascript" charset="utf-8" async="" defer=""></script>
</head>
<body>
<div id="music">
<img class="music_disc music_play" src="img/music_disc.png">
<img src="img/music_pointer.png">
</div>
<div id="page1">
<div></div>
<div>点击屏幕<br>开启好运2016</div>
<div></div>
<div>2016年慕课网新年特献</div>
</div>
<div id="page2">
<div class="bg p2_bg_loading"></div>
<div></div>
<!--三个圈只用一个div即可。放到p2_circle类中-->
<div id="p2_circle"></div>
<div></div>
</div>
<div id="page3">
<div></div>
<div></div>
<div></div>
<!--下联-->
<div class="p3_couplet_second couplet"></div>
<!--上联-->
<div class="p3_couplet_first couplet"></div>
<!--福-->
<div></div>
</div>
<audio autoplay="true">
<source src="audio/happynewyear.mp3" type="audio/mpeg">
</audio>
</body></html>
举报
0/150
提交
取消
