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>
相关文章
最新发布
阅读排行
热门文章
猜你喜欢