<!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>
posted on
