所有图片素材由慕课网下载
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)
};
原文：http://www.cnblogs.com/tyks/p/5202781.html