课程

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

可以分享源代码吗

来源：4-2 5 课程总结

慕粉1800128420

2017-12-11 21:52

有源代码吗？可以分享下吗

写回答 关注

2回答

  • Ya2an
    2017-12-26 10:57:54
    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);
};


    0 0
  • Ya2an
    2017-12-26 10:57:16

    /*通用*/

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

HTML5+CSS3实现春节贺卡

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

110057 学习 · 450 问题

查看课程

相似问题

大牛 没有源代码吗？

回答 1

请发源代码

回答 3

这边有没有源文件可以下载看看吗

回答 1

怎么没有上传源代码

回答 2

代码不能下载吗

回答 1

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