导航效果css-CSDN博客

<!doctype html>
<html>
<head>
	<meta charset="utf-8" />
<style>
html,body{ margin:0; padding:0}
#fa{
	width:800px;
	height:30px;
	background-color:#777;
	list-style:none;
	display:inline-block;
	padding:0;
	margin:200px 20%;
	position:relative;
	color:#fff;
	overflow:hidden;
	}
#fa li{ width:100px; height:30px; line-height:30px; text-align:center; display:inline-block; float:left;}
#fa li:hover{ cursor:pointer}
#fa li:first-child:hover{ animation: one 0.7s; background-color:#CC0}
#fa li:nth-child(2):hover{ animation: two 0.7s; background-color:#6F9}
#fa li:nth-child(3):hover{ animation: three 0.7s; background-color:#0C6}
#fa li:nth-child(4):hover{ animation: four 0.7s; background-color:#C66}
#fa li:nth-child(5):hover{ animation: five 0.7s; background-color:#993}
#fa li:nth-child(6):hover{ animation: six 0.7s; background-color:#FF3}
#fa li:nth-child(7):hover{ animation: seven 0.7s; background-color:#3F6}
#fa li:last-child:hover{ animation: eight 1.2s; background-color:#3C6}
@keyframes one				
{
	0% { transform:scale(1,1)}
	25% { transform:scale(0.8,0.8)}
	50% { transform:scale(1,1)}
	75% { transform:scale(0.8,0.8)}
	100% { transform:scale(1,1)}
}
@keyframes two							
{	
	0% { transform: translate(0,0)}
	10% { transform: translate(10px,0)}
	20% { transform: translate(0,0)}
	30% { transform: translate(10px,0)}
	40% { transform: translate(0,0)}
	50% { transform: translate(10px,0)}
	60% { transform: translate(0,0)}
	70% { transform: translate(10px,0)}
	80% { transform: translate(0,0)}
	90% { transform: translate(10px,0)}
	100% { transform: translate(0,0)}
}
@keyframes three					
{
	0% { transform: rotate(0)}
	25% { transform:rotate(20deg)}
	50% { transform:rotate(-20deg)}
	75% { transform:rotate(20deg)}
	100% { transform:rotate(0)}
}
@keyframes four					
{
	0% { transform: rotate(0)}
	20% { transform:rotate(20deg)}
	40% { transform:rotate(30deg)}
	60% { transform:rotate(20deg)}
	80% { transform:rotate(30deg)}
	100% { transform:rotate(0)}
}
@keyframes five					
{
	0% { opacity:1}
	25% { opacity:0}
	50% { opacity:1}
	75% { opacity:0}
	100% { opacity:1}
}
@keyframes six					
{
	0% { margin-top:0}
	25% { margin-top:-10px}
	50% { margin-top:0}
	75% { margin-top:-5px}
	100% { margin-top:0}
}
@keyframes seven					
{
	0% { transform:rotateY(180deg)}
	100% { transform:rotateY(0)}
}
@keyframes eight				
{
	0% { transform:rotate(0)}
	50% { transform:rotate(360deg)}
	100% { transform:rotate(0)}
}
</style>
</head>
<body>
<ul id="fa">
    <li>缩放</li>
    <li>移动</li>
    <li>倾斜</li>
    <li>倾斜震动</li>
    <li>闪烁</li>
    <li>上下震动</li>
    <li>Y轴旋转</li>
    <li>大旋转</li>
</ul>
<div style="clear:both"></div>
</body>
</html>
转载于:https://www.cnblogs.com/Kqingniao/p/5997374.html