<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta
http-equiv="Content-Type" content="text/html; charset=gb2312"
/>
<title>无标题文档</title>
<style>
*{
margin:0; padding:0;}
/* 渐变颜色参数， 类型， 开始坐标，
结束坐标，开始颜色，结束颜色，过度点颜色（可选） */
.cont {
width: 100px;
height:
100px;
//background-color: #FCC;
margin-left:
50%;
margin-top:
100px;
overflow:hidden;
padding-top:10px;
background:-webkit-gradient(linear,
0% 0%, 0%
100%,from(rgba(0,0,0,.1)),to(rgba(0,0,0,.2)),color-stop(1%,#fff));
}
.cont
i { width:24px ; height:24px; text-align:center; line-height:24px;
font-style:normal; background-color:#09F; color:#fff;
border-radius:50%; display:block; margin:0 auto;}
.cont p {
text-align:center;}
.cont:hover i {
-webkit-animation:
toTopFromBottom .3s forwards;
/* 调用动画名称 时间 结束状态 */
}
/* 定义动画*/
@-webkit-keyframes toTopFromBottom {
49%
{
-webkit-transform:translateY(-100%)
}
50%
{
opacity:.3;
-webkit-transform:translateY(40%)
}
51%
{
opacity:1
}
}
</style>
</head>
<body>
<div
class="cont"><i>1</i><p>测试文本</p></div>
</body>
</html>
做了一个类似天猫鼠标经过icon的动画，记录一下,布布扣,bubuko.com
原文：http://www.cnblogs.com/xiaotian747/p/3670236.html