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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了移动端案例制作学习-贺卡相关的知识,希望对你有一定的参考价值。

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

技术分享

 

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)


};

  

以上是关于移动端案例制作学习-贺卡的主要内容,如果未能解决你的问题,请参考以下文章

c语言制作生日贺卡 c语言制作贺卡

流式布局案例——京东网页

用 HTML 和 CSS 制作一张贺卡

前端入门教程---从0开始手把手教你学习PC端和移动端页面开发第10章有路网PC端主页实战整合

前端入门教程---从0开始手把手教你学习PC端和移动端页面开发第10章有路网PC端主页实战整合

像眨眼应用一样翻转贺卡