移动端案例制作学习-贺卡

所有图片素材由慕课网下载



html5 audio标签

<audio autoplay="true" > //自动播放
<source src="audio/gongxigongxi.mp3" type="audio/mpeg" >
</audio>

css3 animation transform transition keyframes

#page1 > .p1_lantern:before{position: absolute;top: 0;right: 0;left: 0;bottom: 0;margin: auto;width:30vw;height:30vw;background: #d60b3b;opacity: 0.5;border-radius: 50%;z-index: -1;content: "";-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;       -box-shadow: 0 0 10vw 10vw #d60b3b;
-webkit-animation:p1_lantern 1s infinite alternate;
animation:p1_lantern 1s infinite alternate;
}
@keyframes p1_lantern {
0%{
opacity: 0.7;
-webkit-transform:scale(.9,.9);
transform:scale(.9,.9);
}
100%{
opacity: 1;

}
}
@-webkit-keyframes p1_lantern {
0%{
opacity: 0.7;
-webkit-transform:scale(.9,.9);
transform:scale(.9,.9);
}
100%{
opacity: 1;

}
}

javascript 控制

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.style.animationPlayState="paused";				//动画控制
music.style.webkitanimationPlayState="paused";
},false);

music.addEventListener("touchstart",function(event){ 		//移动端 touch 事件监听
if(audio.paused)
{
audio.play()										//audio 控制
this.style.animationPlayState="running";
this.style.webkitanimationPlayState="running";
}
else
{
audio.pause();
this.style.animationPlayState="paused";
this.style.webkitanimationPlayState="paused";
}
},false);

page1.addEventListener("touchstart",function(event){
page1.style.display="none";
page2.style.display="block";
page3.style.display="block";
page3.style.top="100%";
setTimeout(function(){								//javascript 计时
page2.setAttribute("class","page fadeOut");
page3.setAttribute("class","page fadeIn");
},5500);

},false)

};