|
|
|
@ -0,0 +1,314 @@ |
|
|
|
<!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> |
