转自:http://fins.iteye.com/blog/623475
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Animate UI</title>
<style type="text/css">
body {
border : 0px;
padding : 0px;
margin : 0px;
overflow:hidden;
font-size : 13px;
-webkit-user-select : none;
-webkit-cursor: url("redarrow.cur");
}
div {
border : 1px solid blue;
background-color : #ffffff;
text-align : center;
margin : auto;
}
#gindex {
position:absolute;
width:640px;
height:480px;
}
#gtitle {
position:relative;
width : 300px;
height : 100px;
top : 40px;
}
#gmenu {
position:relative;
width : 230px;
top : 60px;
}
#gmenu div {
height : 20px;
margin : 8px;
cursor : pointer;
}
#glogo {
position:absolute;
width : 100px;
height : 50px;
right : 15px;
bottom : 15px;
}
#gexit {
position:absolute;
width : 100px;
height : 50px;
left : 15px;
bottom : 15px;
}
#gmenu div:hover , #gexit:hover, #glogo:hover {
-webkit-transform: scale(1.2);
}
@-webkit-keyframes fade {
0% { opacity: 0; }
100% { opacity: 1; }
}
.fade-in {
-webkit-animation-name: fade;
-webkit-animation-duration: 3s;
}
@-webkit-keyframes gtitle-show {
0% { top: 100px; }
50% { top: 100px; }
100% { top: 40px; }
}
.gtitle-show {
-webkit-animation-name: gtitle-show;
-webkit-animation-duration: 4s;
}
@-webkit-keyframes gmenu-show {
0% { top:-600px; opacity: 0; }
59% { top:-600px; opacity: 0; }
60% { top:60px; opacity: 0; }
100% { opacity: 1; }
}
.gmenu-show {
-webkit-animation-name: gmenu-show;
-webkit-animation-duration: 5s;
}
</style>
</head>
<body>
<div id="gindex" class="fade-in">
<div id="gtitle" class="gtitle-show" >Title</div>
<div id="gmenu" class="gmenu-show">
<div>Start</div>
<div>Load</div>
<div>Help</div>
<div>Scores</div>
<div>Credit</div>
</div>
<div id="gexit">Exit</div>
<div id="glogo">Logo</div>
</div>
</body>
</html>