css3 windows8加载动画特效css代码.

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 css3 windows8加载动画特效css代码. 的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>css3 windows8加载动画特效</title>
<link href="css/zzsc.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="wrapp">
	<div class="text">
		<h1>Windows 8</h1>
	</div>
	<div class="logo">
		<span class="top-left"></span><span class="bottom-right"></span>
	</div>
</div>
</body>
</html>

CSS代码(zzsc.css):

body{margin:0;padding:0;background-color:#90da15;}
.wrapp{position:absolute;top:50%;left:50%;width:600px;height:300px;margin:-150px 0 0 -300px;-webkit-perspective:30px;-webkit-transform:translateX(0px);-webkit-animation:wrapp 400ms 800ms ease-in forwards;-moz-perspective:30px;-moz-transform:translateX(0px);-moz-animation:wrapp 400ms 800ms ease-in forwards;-ms-perspective:30px;-ms-transform:translateX(0px);-ms-animation:wrapp 400ms 800ms ease-in forwards;perspective:30px;transform:translateX(0px);animation:wrapp 400ms 800ms ease-in forwards;}
.text{position:absolute;top:50%;left:50%;width:0px;height:60px;margin:-30px 0 0 -160px;overflow:hidden;-webkit-transform:translateX(0px);-webkit-animation:text 400ms 800ms linear forwards;-moz-transform:translateX(0px);-moz-animation:text 400ms 800ms linear forwards;-ms-transform:translateX(0px);-ms-animation:text 400ms 800ms linear forwards;transform:translateX(0px);animation:text 400ms 800ms linear forwards;}
h1{float:right;font-family:"Segoe UI",Frutiger,"Frutiger Linotype","Dejavu Sans","Helvetica Neue",Arial,sans-serif;font-weight:normal;color:#fff;padding:0;margin:0;width:320px;height:60px;font-size:60px;line-height:60px;}
.logo{position:absolute;top:50%;left:50%;width:90px;height:90px;margin:-45px 0 0 -45px;background-color:#fff;-webkit-transform:translateX(0px) rotateY(10deg);-webkit-animation:logo 500ms 300ms ease-out forwards;-moz-transform:translateX(0px) rotateY(10deg);-moz-animation:logo 500ms 300ms ease-out forwards;-ms-transform:translateX(0px) rotateY(10deg);-ms-animation:logo 500ms 300ms ease-out forwards;transform:translateX(0px) rotateY(10deg);animation:logo 500ms 300ms ease-out forwards;}
.logo .top-left{position:absolute;top:0;left:0;width:44px;height:44px;border-right:solid 2px #90da15;border-bottom:solid 2px #90da15;}
.logo .bottom-right{position:absolute;bottom:0;right:0;width:44px;height:44px;border-left:solid 2px #90da15;border-top:solid 2px #90da15;}
@-webkit-keyframes logo{from{-webkit-transform:translateX(0px) rotateY(10deg);}
to{-webkit-transform:translateX(0px) rotateY(-10deg);}
}
@-webkit-keyframes text{from{width:0px;-webkit-transform:translateX(0px);}
60%{width:0px;}
to{width:320px;-webkit-transform:translateX(240px);}
}
@-webkit-keyframes wrapp{from{-webkit-transform:translateX(0px);}
to{-webkit-transform:translateX(-200px);}
}
@-moz-keyframes logo{from{-moz-transform:translateX(0px) rotateY(10deg);}
to{-moz-transform:translateX(0px) rotateY(-10deg);}
}
@-moz-keyframes text{from{width:0px;-moz-transform:translateX(0px);}
60%{width:0px;}
to{width:320px;-moz-transform:translateX(240px);}
}
@-moz-keyframes wrapp{from{-moz-transform:translateX(0px);}
to{-moz-transform:translateX(-200px);}
}
@-ms-keyframes logo{from{-ms-transform:translateX(0px) rotateY(10deg);}
to{-ms-transform:translateX(0px) rotateY(-10deg);}
}
/* www.datouwang.com */
@-ms-keyframes text{from{width:0px;-ms-transform:translateX(0px);}
60%{width:0px;}
to{width:320px;-ms-transform:translateX(240px);}
}
@-ms-keyframes wrapp{from{-ms-transform:translateX(0px);}
to{-ms-transform:translateX(-200px);}
}
@keyframes logo{from{transform:translateX(0px) rotateY(10deg);}
to{transform:translateX(0px) rotateY(-10deg);}
}
@keyframes text{from{width:0px;transform:translateX(0px);}
60%{width:0px;}
to{width:320px;transform:translateX(240px);}
}
@keyframes wrapp{from{transform:translateX(0px);}
to{transform:translateX(-200px);}
}

附件:下载该文件资源,减少时间成本(增值服务)