fhlz
/
HuaSHi_QMT

<!DOCTYPE html><html lang="zh">	<head>		<meta charset="UTF-8">		<meta name="viewport" content="width=device-width, initial-scale=1.0">		<meta http-equiv="X-UA-Compatible" conten="ie=edge">		<title>华诞画室</title>		<style>			* {				margin: 0;				padding: 0;			}
			main {				height: 100%;				width: 100%;				overflow: scroll;				scroll-snap-type: y mandatory;			}
			.musicImg {				width: 40px;				position: fixed;				z-index: 1;				top: 2%;				left: 85%;			}
			.pageStyle {				scroll-snap-align: center;				height: 100%;				width: 100%;				position: relative;				transition: 1s;			}
			.page1 {				background-image: url(img/bg.png);				background-size: 100% 100%;
			}
			.caiDai {				height: 235px;				position: absolute;				top: 55%;				left: 8%;				animation: BigtoSmall linear infinite 1s;			}
			.tuoYuan {				height: 60px;				position: absolute;				top: 48%;				left: 52%;				animation: BigtoSmall linear infinite;			}
			.shouZhi {				position: absolute;				top: 55%;				left: 40%;				animation: chuo linear infinite 1s;			}
			.page2 {				background-image: url(img/bg2.png);				background-size: 100% 100%;			}
			.button-dongBi {				width: 70px;				position: absolute;				top: 57%;				left: 54%;			}
			.tuoYuan2 {				height: 25px;				position: absolute;				top: 57.5%;				left: 60%;				animation: BigtoSmall linear infinite 1s;			}
			.shouZhi2 {				width: 50px;				position: absolute;				top: 60%;				left: 58%;				animation: chuo linear infinite 1s;			}
			.huaChuNiDe {				width: 25px;				position: absolute;				top: 5%;				left: 78%;			}
			.guoQingZhuFu {				width: 25px;				position: absolute;				top: 5%;				left: 70%;			}
			.page3 {				background-image: url(img/未填色.png);				background-size: 100% 100%;
			}
			.page3-black {				width: 100%;				height: 100%;				background-image: url(img/灰度背景.png);			}
			.dianJiTianSe {				width: 300px;				position: absolute;				left: 10%;				top: 30%;			}
			.page4 {				background-image: url(img/未填色.png);				background-size: 100% 100%;			}
			.wanChengBianSe {				width: 100px;				position: absolute;				top: 80%;				left: 20%;			}
			.yiJianBianSe {				width: 100px;				position: absolute;				top: 80%;				left: 60%;			}
			.page5 {				background-image: url(./img/尾页.png);				background-size: 100% 100%;
			}
			.page5-share {				width: 100%;				height: 100%;				background-image: url(img/灰度背景.png);				position: absolute;				z-index: -1;			}
			.xiongMaoTou {				width: 250px;				position: absolute;				right: 0;			}
			.chongWanYiCi {				height: 75px;				position: absolute;				top: 85%;				left: 15%;			}
			.fenXiang {				height: 75px;				position: absolute;				top: 85%;				left: 68%;			}
			@keyframes BigtoSmall {				from {					transform: scale(0.9);				}
				50% {					transform: scale(1.1);				}
				to {					transform: scale(0.9);				}			}
			@keyframes chuo {				from {					transform: translate(5px, -5px);				}
				50% {					transform: translate(0px, 0px);				}
				to {					transform: translate(5px, -5px);				}			}
			@keyframes zhuan {				from {					transform: rotate(0deg);				}
				to {					transform: rotate(360deg);				}			}		</style>
	</head>	<body>		<main>			<img class="musicImg" src="img/fu.png" />			<audio id="bgm" loop="loop">				<source src="media/BGM.mp3" type="audio/mp3" />			</audio>			<div class="pageStyle page1">				<img class="caiDai" src="img/彩带.png" />				<img class="tuoYuan" src="img/椭圆.png" onclick="turnPage(1)" />				<img class="shouZhi" src="img/手指.png" />			</div>			<div class="pageStyle page2">				<img class="button-dongBi" src="img/按钮-点击动笔.png" onclick="turnPage(2)" />				<img class="tuoYuan2" src="img/椭圆.png" onclick="turnPage(2)" />				<img class="shouZhi2" src="img/手指2.png" />				<img class="huaChuNiDe" src="img/画出你的.png" />				<img class="guoQingZhuFu" src="img/国庆祝福.png" />			</div>			<div class="pageStyle page3">				<div class="page3-black">					<img class="dianJiTianSe" src="img/点击空白处即可填色.png" onclick="turnPage(3)" />				</div>			</div>			<div class="pageStyle page4 weiTianSe">				<img class="wanChengBianSe" src="img/完成填色.png" onclick="wanChengTianSe(4)" />				<img class="yiJianBianSe" src="img/一键变色.png" onclick="yiJianBianSe()" />			</div>			<div class="pageStyle page5">				<img class="chongWanYiCi" src="img/重玩一次.png" onclick="turnPage(0)" />				<img class="fenXiang" src="img/分享.png" onclick="fenXiang()" />				<div class="page5-share" onclick="quXiaoFenXiang()">					<img class="xiongMaoTou" src="img/熊猫头.png" />				</div>			</div>		</main>		<script type="text/javascript">			//初始化适配高度			var height = document.documentElement.clientHeight;			if (height > 900) {				alert("请使用手机端食用本作品");			}			document.body.style.height = height + 'px';			//音乐播放			var musicImg = document.querySelector(".musicImg");			var bgm = document.querySelector("#bgm");			musicImg.onclick = function() {				if (bgm.paused) {					bgm.play();					musicImg.style.animation = "zhuan 4s linear infinite";					musicImg.style.animationPlayState = "running";				} else {					bgm.pause();					musicImg.style.animationPlayState = "paused";				}			}			//翻页			function turnPage(obj) {				var pageStyle = document.querySelectorAll(".pageStyle")				for (var i = 0; i < pageStyle.length; i++) {					pageStyle[i].style.height = "0px";				}				pageStyle[obj].style.height = "100%";			}
			function yiJianBianSe() {				var page4 = document.querySelector(".page4");				if (page4.className == "pageStyle page4 weiTianSe") {					page4.style.backgroundImage = "url(img/已填色.png)";					page4.className = "pageStyle page4 yiTianSe";				} else {					page4.style.backgroundImage = "url(img/未填色.png)";					page4.className = "pageStyle page4 weiTianSe";				}			}
			function wanChengTianSe(obj) {				var tainSe = document.querySelector(".yiTianSe");				var tainSeState = tainSe == null ? true : false;				if (tainSeState == false) {					turnPage(obj);				}			}
			function fenXiang() {				var shareBG = document.querySelector(".page5-share");				shareBG.style.zIndex = "2";			}
			function quXiaoFenXiang() {				var shareBG = document.querySelector(".page5-share");				shareBG.style.zIndex = "-1";			}		</script>	</body></html>