動畫不動啊
動畫不動耶
<!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代碼 不明白動畫為什么不動
圖標我用的現在淘寶這個版本的圖片
