1、用css做动画效果： 放鼠标才会发生 利用hover
<head>
<style>
#aa{
background-color: red;
width: 100px;
height: 120px;
margin-top: 50px;
}
#aa:hover{ /* 鼠标放在图片上发生的变化,鼠标移开效果停止*/
margin-left: 400px;
transition: 10s; /* 变化时间为5秒*/
background-color: yellow; /* 鼠标放上后颜色会由红色变为黄色*/
transform: rotate(360deg); /* 以360度旋转的方式到指定地方*/
}
</style>
</head>
<body>
<div id="aa"></div>
2、 js动画效果：不用放鼠标可以自己移动 利用时间间隔
<div id="bb" style="background-color: yellow; width: 50px; height: 50px;
margin-left: 50px;" ></div>
<script>
var a=window.setInterval("change()",500);
function change(){
var d=document.getElementById("bb");
var c=d.style.marginLeft;
c=parseInt(c);
c+=1;
if(c<=500){
d.style.marginLeft=c+"px";
}
else{
window.clearInterval(a); -----清除间隔
}}
</script>