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

Posted 2020-06-14

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

 

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)


};