html5简单的进入页面的动画

| 阅读数:--次| 作者:小猪仔
摘要：html5简单的进入页面的动画,要在支持html5+css3的浏览器打开
html5代码
运行代码 
<!-- HTML5 -->
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="apple-touch-fullscreen" content="YES" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="format-detection" content="telephone=no" />
        <style type="text/css">
        	#ggimgid{-webkit-transform:translateZ(0);}
        	*{-webkit-touch-callout: none; /* prevent callout to copy image, etc when tap to hold */
			-webkit-text-size-adjust: none; /* prevent webkit from resizing text to fit */
			-webkit-tap-highlight-color: rgba(210,210,210,0.35); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
			-webkit-user-select: none; /* prevent copy paste, to allow, change 'none' to 'text' */}
        	.ggimg{
        		position: absolute;
        		z-index:999;
        		top:0;
        		left:0;
        		width:100%;
        		height:100%;
        		overflow:hidden;
        	}
        	.ggdhimg{
        		height:100%;
        		width:100%;
        		opacity:0;
        		-webkit-transform-origin: 320px 0px;
        		-webkit-transform: translate(320px,0px) scale(1) translateZ(0px);
        	}
        	
        	.animgalpha{
				-webkit-animation-name:alphamc;
				-webkit-animation-duration: 1.2s;
				-webkit-animation-iteration-count:1;
				-webkit-animation-timing-function:ease-out;
			}
			.animgalpha2{
				-webkit-transition: -webkit-transform 200ms ease-out;
				transition: -webkit-transform 200ms ease-out;
				-webkit-transform-origin: 0px 0px;
				-webkit-transform: translate(0px,0px) scale(1) translateZ(0px);
			}
			@-webkit-keyframes alphamc{
				0% {
				 	opacity:1;
				}
				67% {
					opacity:1;
				}
				85% {
					opacity:.5;
				}
				100% {
					opacity:0;
				}
			}
			#bgdivid,#zzdivid{-webkit-transform:translateZ(0);}
			#bgdivid,#zzdivid{
				height:100%;
        		width:100%;
        		position:fixed;
        		top:0;
        		left:0;
			}
			#bgdivid{z-index:1;}
			#zzdivid{z-index:2;}
			#maindivid{z-index:3;}
			#maindivid{
				position:absolute;
				top:0px;
				left:0px;
				width:100%;
				display:none;
			}
			#bgdivid img{
				height:100%;
        		width:100%;
			}
			#zzdivid img{
				height:100%;
        		width:100%;
			}
			
        </style>
    </head>
    <body id="bodyid" style="background:none;">
    	<div id="bgdivid"></div>
    	<div id="zzdivid"></div>
    	<div id="maindivid">
    		<div style="width:300px;margin:0 auto;color:white;margin-top:200px;">
    			<p>测试测试测试测试测试测试测试测试测试<p/>
    			<p>测试测试测试测试测试测试测试测试测试<p/>
    			<p>测试测试测试测试测试测试测试测试测试<p/>
    			<p>测试测试测试测试测试测试测试测试测试<p/>
    			<p>测试测试测试测试测试测试测试测试测试<p/>
    			<p>测试测试测试测试测试测试测试测试测试<p/>
    			<p>测试测试测试测试测试测试测试测试测试<p/>
    			<p>测试测试测试测试测试测试测试测试测试<p/>
    			<p>测试测试测试测试测试测试测试测试测试<p/>
    			<p>测试测试测试测试测试测试测试测试测试<p/>
    			<p>测试测试测试测试测试测试测试测试测试<p/>
    			<p>测试测试测试测试测试测试测试测试测试<p/>
    			<p>测试测试测试测试测试测试测试测试测试<p/>
    			<p>测试测试测试测试测试测试测试测试测试<p/>
    			<p>测试测试测试测试测试测试测试测试测试<p/>
    			<p>测试测试测试测试测试测试测试测试测试<p/>
    			<p>测试测试测试测试测试测试测试测试测试<p/>
    			<p>测试测试测试测试测试测试测试测试测试<p/>
    			<p>测试测试测试测试测试测试测试测试测试<p/>
    			<p>测试测试测试测试测试测试测试测试测试<p/>
    			<p>测试测试测试测试测试测试测试测试测试<p/>
    			<p>测试测试测试测试测试测试测试测试测试<p/>
    			<p>测试测试测试测试测试测试测试测试测试<p/>
    			<p>测试测试测试测试测试测试测试测试测试<p/>
    			<p>测试测试测试测试测试测试测试测试测试<p/>
    			<p>测试测试测试测试测试测试测试测试测试<p/>
    			<p>测试测试测试测试测试测试测试测试测试<p/>
    			<p>测试测试测试测试测试测试测试测试测试<p/>
    			<p>测试测试测试测试测试测试测试测试测试<p/>
    			<p>测试测试测试测试测试测试测试测试测试<p/>
    			<p>测试测试测试测试测试测试测试测试测试<p/>
    			<p>测试测试测试测试测试测试测试测试测试<p/>
    			<p>测试测试测试测试测试测试测试测试测试<p/>
    			<p>测试测试测试测试测试测试测试测试测试<p/>
    			<p>测试测试测试测试测试测试测试测试测试<p/>
    			<p>测试测试测试测试测试测试测试测试测试<p/>
    			<p>测试测试测试测试测试测试测试测试测试<p/>
    			<p>测试测试测试测试测试测试测试测试测试<p/>
    			<p>测试测试测试测试测试测试测试测试测试<p/>
    			<p>测试测试测试测试测试测试测试测试测试<p/>
    			<p>测试测试测试测试测试测试测试测试测试<p/>
    			<p>测试测试测试测试测试测试测试测试测试<p/>
    		</div>
    	</div>
    	<div class="ggimg" id="ggimgid">
    		<img src="http://img2.kwcdn.kuwo.cn/star/upload/12/12/1415187649340_.jpg" class="ggdhimg" id="ggimgid2" onload="loadimg();"/>
    		<img src="http://img4.kwcdn.kuwo.cn/star/upload/10/10/1415187868010_.png" style="opacity:0;" onload="loadimg();"/>
    	</div>
        <script type="text/javascript">
        	var goldsum=0;
        	function loadimg(){
        		goldsum++;
        		if(goldsum>1){
        			pagedh();
        		}
        	}
        	//全局变量，触摸开始位置
            var startX = 0, startY = 0;
            //touchstart事件
            function touchSatrtFunc(evt) {
                evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等
            }

            //touchmove事件，这个事件无法获取坐标
            function touchMoveFunc(evt) {
                evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等
            }

            //touchend事件
            function touchEndFunc(evt) {
                evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等
            }
        	//绑定事件
            function bindEvent(f) {
            	if(f==1){
            		document.removeEventListener('touchstart', touchSatrtFunc, false);
	                document.removeEventListener('touchmove', touchMoveFunc, false);
	                document.removeEventListener('touchend', touchEndFunc, false);
            	}else{
	                document.addEventListener('touchstart', touchSatrtFunc, false);
	                document.addEventListener('touchmove', touchMoveFunc, false);
	                document.addEventListener('touchend', touchEndFunc, false);
                }
            }
            function zyxtest(){
            	try {
                    document.createEvent("TouchEvent");
                    bindEvent();//绑定事件
                }
                catch (e) {
                }
                
            }
            function pagedh(){
            	var dh=document.getElementById("ggimgid2");
                dh.style.opacity=1;
            	dh.className='ggdhimg animgalpha2';
            	window.setTimeout(function(){
            		dh.style.opacity=0;
            		window.setTimeout(function(){
	            		var zzdiv=document.getElementById("zzdivid");
	            		zzdiv.innerHTML='<img src="http://img4.kwcdn.kuwo.cn/star/upload/10/10/1415187868010_.png"/>';
	            		var bgdiv=document.getElementById("bgdivid");
	            		bgdiv.innerHTML='<img src="http://img2.kwcdn.kuwo.cn/star/upload/12/12/1415187649340_.jpg"/>';
	            		
	            		var maindiv=document.getElementById("maindivid");
	            		maindiv.style.display='block';
            		},500);
            		dh.className='ggdhimg animgalpha2 animgalpha';
            	},200);
            	window.setTimeout(function(){
            		try{
	            		var dhdiv=document.getElementById("ggimgid");
	            		dhdiv.parentNode.removeChild(dhdiv);
	            		bindEvent(1);
            		}catch(e){
            		}
            	},1400);
            }
            window.onload=zyxtest;
    	</script>
    </body>
</html>
返回顶部

Copyright © 2014 网址:www.webkfa.com

学到老代码浏览 关闭浏览