css3-实现的一个简单的"动态主菜单" 示例

转自: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>

 

你可能感兴趣的:(html,UI,css,Blog,webkit)