Animation鱼眼效果
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>鱼眼效果</title>
<style>
a:link {
text-decoration:none
}
a {
display:inline-block;
width: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>
最新文章
- Spring 4 官方文档学习(十四)WebSocket支持
- 敏捷数据科学:用Hadoop创建数据分析应用
- 自动化运维工具ansible学习+使用ansible批量推送公钥到远程主机
- 介绍 .NET Standard
- folly
- BZOJ-3227 红黑树(tree) 树形DP
- 自己的3dmax作品RX-105柯西高达
- POJ 2136
- Android 开发Project中各个目录和文件的介绍
- Caffe : Layer Catalogue(2)
- HDU 4865 Peter&#39;s Hobby(2014 多校联合第一场 E)(概率dp)
- CSS基础知识(概念、块级元素、行内元素、选择器)
- web开发性能优化---分布式篇
- IDEA tomcat8 控制台日志乱码
- 在delphi中XLSReadWriteII.组件的应用实例(2)
- Lucene的入门
- Oracle流程控制语句
- MySQL 检索数据(SELECT)
- tensorflow内存溢出问题
- https如何工作