                        課程
                    
                        /前端開發
                        
                            /Html5
                        
                        /HTML5+CSS3實現春節賀卡

大牛沒有源代碼嗎？

大海qq

2016-05-24

源自：HTML5+CSS3實現春節賀卡 3-6

關注問題我要回答

1028

操作

收起

1 回答

weibo_小野4455_0
2016-05-24

<!DOCTYPE?html>
<html>
<head>
<meta?charset="UTF-8">
<meta?http-equiv="X-UA-Compatible"?content="IE=edge,chrome=1">
<meta?name="viewport"?content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<meta?name="format-detection"?content="telephone=no">
<title>html5</title>
<link?rel="stylesheet"?href="./style/style.css">
<script?type="text/javascript"?src="script/script.js"></script>?
</head>
<body>
<div>
<img?src="./images/music_pointer.png">
<img?id="music"?src="./images/music_disc.png">
</div>
<div?id="page1">
<div></div>
<div>點擊屏幕<br>開啟好運2016</div>
<div>2016by123</div>
</div>
<div?id="page2">
<div></div>
<div></div>
<div></div>
</div>
<div?id="page3">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<audio?autoplay="true">
<source?src="./audio/music.mp3"?type="audio/mpeg">
</audio>
</body>
</html>

*?{margin:?0;padding:?0;font-size:?1.5625vw;font-family:?"微軟雅黑";
}
html,body?{height:?100%;overflow:?hidden;
}
/*?music?*/
.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;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?>?.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);
	}
}
/*?page?bg?*/
.page?{position:?absolute;width:?100%;height:?100%;
}
.page?>?.bg?{position:?absolute;z-index:?-1;width:?100%;height:?100%
}
/*?page1?*/
#page1?{display:?block;}
#page1?>?.bg?{background:?url(../images/p1_bg.jpg)?no-repeat?center?center;background-size:?100%;}
#page1?>?.p1_lantern?{position:?absolute;top:?-3%;right:?0;left:?0;margin:?auto;background:?url(../images/p1_lantern.png)?no-repeat?center?center;background-size:?100%;width:?45vw;height:?71.2vh;font-size:?3.5rem;padding-top:?31vh;text-align:?center;-webkit-box-sizing:border-box;???-moz-box-sizing:border-box;????-ms-box-sizing:border-box;?????-o-box-sizing:border-box;color:?#fff;
}
#page1?>?.p1_lantern:before{position:?absolute;top:?0;right:?0;bottom:?0;left:?0;margin:?auto;z-index:?-1;content:?"";width:?30vw;height:?30vw;background:?#d60b3b;opacity:?0.5;border-radius:?50%;-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;
	-webkit-animation:?p1_lantern?.5s?infinite?alternate;
	????????animation:?p1_lantern?.5s?infinite?alternate;
}
@keyframes?p1_lantern?{
	0%?{?opacity:?.5;
		-webkit-transform:?scale(.8,.8);
		????????transform:?scale(.8,.8);
	}
	100%?{?opacity:?1;
		-webkit-transform:?scale(1,1);
		????????transform:?scale(1,1);
	}
}
#page1?>?.p1_words?{position:?absolute;left:?0;right:?0;bottom:?48px;font-size:?3rem;text-align:?center;

}
/*?page2?*/
#page2?{display:?none;
	transition:?.5s;
}
#page2?>?.p2_bg_loading?{
	z-index:?4;?background:?#ef1639;
	-webkit-animation:?p2_bg_loading?2s?linear?forwards;
	????????animation:?p2_bg_loading?2s?linear?forwards;
}
@keyframes?p2_bg_loading?{
	0%???{opacity:?1;}
	100%?{opacity:?0;}
}
#page2.fadeOut?{
	opacity:?.3;
	-webkit-transform:?translate(0,-100%);
	????????transform:?translate(0,-100%);
}
#page2?>?.bg?{background:?url(../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;background:?url(../images/p2_circle_outer.png)?no-repeat?center?center;background-size:100%;width:?59vw;height:?59vw;
	-webkit-animation:p2_circle_outer?1s?linear?3s?infinite;
	???????animation:?p2_circle_outer?1s?linear?3s?infinite;
}
@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:?0;right:?0;bottom:?0;left:?0;margin:?auto;content:?"";background:?url(../images/p2_circle_middle.png)?no-repeat?center?center;background-size:100%;width:?45vw;height:?45vw
	-webkit-animation:p2_circle_middle?1s?linear?2s?infinite;
	???????animation:?p2_circle_middle?1s?linear?2s?infinite;
}
@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(../images/p2_circle_inner.png)?no-repeat?center?center;background-size:100%;width:?39vw;height:?39vw;
	-webkit-animation:p2_circle_inner?1s?linear?1s?infinite;
	???????animation:?p2_circle_inner?1s?linear?1s?infinite;
}
@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(../images/p2_2016.png)?no-repeat?center?center;background-size:100%;width:?27vw;height:?27vw
}
/*?page3?*/
#page3?{display:?none;
	transition:?.5s;
}
#page3.fadeIn?{
	-webkit-transform:?translate(0,-100%);
	????????transform:?translate(0,-100%);
}
#page3?>?.bg?{background:?url(../images/p3_bg.jpg)?no-repeat?center?center;background-size:?100%;
}
#page3?>?.p3_second?{width:?23vw;height:?41vh;position:?absolute;top:?24vh;left:?4vw;background:?url(../images/p3_couplet_second.png)?no-repeat?center?center;background-size:?100%;
}
#page3?>?.p3_first?{width:?23vw;height:?41vh;position:?absolute;top:?24vh;right:?4vw;background:?url(../images/p3_couplet_first.png)?no-repeat?center?center;background-size:?100%;
}
#page3?>?.p3_blessing?{width:?32vw;height:?32vw;position:?absolute;right:?0;left:?0;bottom:?10vh;margin:?auto;border-radius:50%;;background:?url(../images/p3_blessing.png)?no-repeat?center?center;-webkit-background-size:?100%;background-size:?100%;
	-webkit-animation:?p3_blessing?2s?linear?infinite;
	????????animation:?p3_blessing?2s?linear?infinite;
}
@keyframes?p3_blessing?{
	0%?{
		-webkit-transform:?rotate(0deg);
		????????transform:?rotate(0deg);
	}
	100%?{
		-webkit-transform:?rotate(360deg);
		????????transform:?rotate(360deg);
	}
}

window.onload?=?function(){
	var?music?=?document.getElementById('music');
	var?audio?=?document.getElementsByTagName('audio')[0];
	var?page1?=?document.getElementById('page1');
	var?page2?=?document.getElementById('page2');
	var?page3?=?document.getElementById('page3');
	//音樂停止?動畫停止
	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)
	
}

有些地方的東西省略了，大體是一樣的

1 回復有任何疑惑可以回復我~

收起回答

大海qq 提問者

謝謝 3q

2016-06-01 回復有任何疑惑可以回復我~

舉報

0/150

提交

取消

HTML5+CSS3實現春節賀卡

參與學習 110191 人
解答問題 492 個

又逢新春佳節，春節賀卡搞起來，學會HTML5+CSS3實現春節賀卡

進入課程

本課相似問答

2 回答怎么沒有上傳源代碼

2 回答老師有沒有源碼

4 回答可以分享源代碼嗎

3 回答請發源代碼

1 回答這邊有沒有源文件可以下載看看嗎

搜索更多本課相關問答

大牛沒有源代碼嗎？

我要回答關注問題

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

大牛 沒有源代碼嗎？

1 回答

本課相似問答

大牛 沒有源代碼嗎？

大牛沒有源代碼嗎？

大牛沒有源代碼嗎？