<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>鱼眼效果</title>
<style>
a:link {
text-decoration:none
}
a {
display:inline-block;
120px;
height:30px;
background-color:#f21141;
border:2px solid #000000;
border-radius:20px;
float:left;
text-align:center;
line-height:30px;
color:#000;
margin-right:3px;
}
@-webkit-keyframes 'xiaolei' {
0%
{
-webkit-transform:scale(1);
background-color:#f21141;
border-radius:10px;
}
40% {
-webkit-transform:scale(1.5);
background-color:#00ff21;
border-radius:10px;
}
100% {
-webkit-transform:scale(1);
background-color:#f21141;
border-radius:10px;
}
}
a:hover {
-webkit-animation-name:'xiaolei';
-webkit-animation-duration:4s;
-webkit-animation-iteration-count:infinite;
}
/*infinite:无限的；无穷的*/
</style>
</head>
<body>
<a href="">小蕾1</a>
<a href="">小蕾2</a>
<a href="">小蕾3</a>
<a href="">小蕾4</a>
<a href="">小蕾5</a>
</body>
</html>