CSS3:飞行动画菜单效果

首先，我们需要创建一个无序列表菜：

/* Sample #1 */
<ul id="fly-menu">
	<li>
		<a href="#">
			<img src="images/heart.png" alt="webstuffshare" /> 
				Webstuffshare Home
		</a>
	</li>
	<li>
		<a href="#">
			<img src="images/rss.png" alt="rss" /> Subscribe RSS Feed
		</a>
	</li>
	<li>
		<a href="#">
			<img src="images/email.png" alt="email" /> Subscribe Email
		</a>
	</li>
	<li>
		<a href="#">
		<img src="images/twitter.png" alt="twitter" /> Follow Twitter
		</a>
	</li>
</ul>
/* Sample #2 */
<ul id="fly-glow-menu">	<li>
		<a href="#">
			<img src="images/heart.png" alt="webstuffshare" /> 
				Webstuffshare Home
		</a>
	</li>
	<li>
		<a href="#">
			<img src="images/rss.png" alt="rss" /> Subscribe RSS Feed
		</a>
	</li>
	<li>
		<a href="#">
			<img src="images/email.png" alt="email" /> Subscribe Email
		</a>
	</li>
	<li>
		<a href="#">
		<img src="images/twitter.png" alt="twitter" /> Follow Twitter
		</a>
	</li>
</ul>

默认情况下，它们是垂直排列的，接下来，我们为它们添加水平左浮动的css属性，并为css动画过渡效果设置0.3秒或300毫秒的时间。

.cleaner {
clear: both;
}

#fly-menu, #fly-glow-menu {
margin: 1em auto 0 auto;
}

#fly-menu li, #fly-glow-menu li {

/* Basic style */
list-style-type: none;
margin-right: .5em;
float: left;
font-size: 15px;
background: #cacaca;
padding: 10px;
cursor: pointer;

/* Add shadow */
-webkit-box-shadow: inset 0px 0px 10px rgba(0,0,0, .3);
-moz-box-shadow: inset 0px 0px 10px rgba(0,0,0, .3);
box-shadow: inset 0px 0px 10px rgba(0,0,0, .3);

/*
Add animation using transition
-webkit : Safari & Chrome.
-moz : Firefox
-o : Opera
*/
-webkit-transition: .3s ease-in-out;
-moz-transition: .3s ease-in-out;
-o-transition: .3s ease-in-out;
}

由于无序列列表li元素应用了左浮动，所以我们要添加一个.claner清除浮动。最后在菜单的:hover伪元素添加“margin-top”-1em的属性。让菜单真正飞扬起来。

#fly-menu li:hover {
	margin-top: -1em;
}

最后我们可以通过改变背景颜色和text-shadow的属性，建造不同的效果。

#fly-glow-menu li:hover {

margin-top: -1em;
background: #fff;

-webkit-box-shadow: 0px 0px 10px rgba(0,0,0, .3);
-moz-box-shadow: 0px 0px 10px rgba(0,0,0, .3);
box-shadow: 0px 0px 10px rgba(0,0,0, .3);
}