动画不动耶
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#move a:hover{
color: #f00;
}
#move img{
border: none;
}
#move a{
display: inline-block;/*应用此特性的元素呈现为内联对象，周围元素保持在同一行，但可以设置宽度和高度地块元素的属性*/
width: 100px;
height: 100px;
border: 1px solid #dddddd;
border-radius: 3px;
background-color: #fff;
text-align: center;
margin: 10px 17px;
position: relative;
padding-top: 11px;
color: #9c9c9c;
font-size: 20px;
text-decoration: none;
line-height: 15px;
overflow: hidden;
border: 1px solid rebeccapurple;
}
#move a i{
position: relative;
left: 0px;
display: inline-block;
width: 100%;
text-align: center;
opacity: 1;
top: 11px;
}
#move {
width: 428px;
height: 280px;
background-color: #9c9c9c;
border: 1px solid black;
margin: auto;
padding:20px;
}
</style>
<script src="JS/move-完美.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
window.onload=function(){
var oMain=document.getElementById('main'),
oLis=oMain.getElementsByTagName('a');
for (var i = 0; i < oLis.length; i++) {
oLis[i].onmouseenter=function(){
var _this=this.getElementsByTagName('i')[0];
startMove(_this,{top:-11,opacity:0},function(){
_this.style.top=30+'px';
startMove(_this,{top:11,opacity:100})
});
};
}
}
</script>
</head>
<body>
<div id="move">
<a href="#">
<i><img src="img/taobao-lvxing.jpg"/></i>
<p>旅行</p>
</a>
<a href="#">
<i><img src="img/taobao-lvxing.jpg"/></i>
<p>旅行</p>
</a>
<a href="#">
<i><img src="img/taobao-movie.jpg"/></i>
<p>电影</p>
</a>
<a href="#">
<i><img src="img/taobao-music.jpg"/></i>
<p>音乐</p>
</a>
<a href="#">
<i><img src="img/taobao-waimai.jpg"/></i>
<p>外卖</p>
</a>
<a href="#">
<i><img src="img/taobao-waimai.jpg"/></i>
<p>外卖</p>
</a>
</div>
</body>
</html>
这是html代码 不明白动画为什么不动
图标我用的现在淘宝这个版本的图片
